iT邦幫忙

0

前端工程學習日記第4天

#使用 margin(向外)、padding(向內) 來推擠距離
css:
.box{border:10px solid #000;
padding-left:30px;
padding-right:30px;}
https://ithelp.ithome.com.tw/upload/images/20201105/20132398oLzIOyshVT.png
向內留白30px
!
https://ithelp.ithome.com.tw/upload/images/20201105/20132398TPwEB4oEXZ.png

.box p{margin-bottom: 50px;} 推下邊界50pixal
https://ithelp.ithome.com.tw/upload/images/20201105/20132398Fs5QL5q7pr.png
向外留白50px
https://ithelp.ithome.com.tw/upload/images/20201105/20132398G2DocUYhBS.png
向外留白後box2被往外推
https://ithelp.ithome.com.tw/upload/images/20201105/20132398R1Krjj59Hz.png

精誠所至,金石為開!大浪掏沙,是金子夠質量才能留下

#Box Model(盒模型)
CSS:
.box{width:300px;height:300px;background:#000}
https://ithelp.ithome.com.tw/upload/images/20201105/201323980tv3tHzHCb.png
滑鼠滑到.box會看到對應高度是300px
https://ithelp.ithome.com.tw/upload/images/20201105/20132398jMWEiFKvNc.png
border padding 內部 畫實線黑色;外部margin是在實線之外畫虛線所以上下兩個box中間白色的30px就是margin造成的
https://ithelp.ithome.com.tw/upload/images/20201105/20132398QcUqEV0M8N.png
https://ithelp.ithome.com.tw/upload/images/20201105/20132398quPILGmHyt.png
https://ithelp.ithome.com.tw/upload/images/20201105/20132398CZ6bJ8FCUb.png

#使用 margin: auto 讓版型置中
yahoo首頁,視窗拉右,中間的內容會保持致中隨著視窗移動而變化還是保持致中
html:

<body>
<div class="header"></div>
<div class="content"></div>
</body>
CSS:
.header{width:900px;heith
}
.content{width:900px;}

以上這樣是不夠的 不會致中

 <body>
     <div class="wrap">
        <div class="header"></div>
        <div class="content"></div>
</body>

CSS:
.wrap{width:900px;
margin-left:auto;
margin-right:auto;} 自動外推左右 就會自動致中了
.header{width:900px;heith
}
.content{width:900px;}
https://ithelp.ithome.com.tw/upload/images/20201105/20132398KH4Mc8sW20.png
![https://ithelp.ithome.com.tw/upload/images/20201105/20132398gwcVgOcD8B.png]
*如果拿掉寬度,只有margin-left:auto;margin-right:auto是不夠的 (https://ithelp.ithome.com.tw/upload/images/20201105/20132398gwcVgOcD8B.png)

再加個footer
html:

https://ithelp.ithome.com.tw/upload/images/20201105/20132398ly6yFtTWT2.png

margin:0 auto 0 auto 這個代表 上右下左
https://ithelp.ithome.com.tw/upload/images/20201105/20132398toUG6tiIuA.png


尚未有邦友留言

立即登入留言