網(wǎng)站制作NEWS
塊盒是獨(dú)占一行,為什么浮動(dòng)可以讓兩個(gè)塊盒共同占一行
盒子
盒子模型 英文：box model。
最常見的盒子是div span
盒子中的區(qū)域：
1.寬 width px
2.高 height
3.內(nèi)邊距 padding
4.邊框 border
5.外邊距
margin
【注】 標(biāo)準(zhǔn)盒模型的寬和高和盒子真實(shí)占有的寬高不是一個(gè)概念。
【注】
盒子的寬不設(shè)置時(shí)，默認(rèn)為100%；但是寬度一般會(huì)做設(shè)置，高度卻不一定。
盒子真實(shí)占有的寬：內(nèi)容的寬+左右padding+左右邊框
盒子真實(shí)占有的高：內(nèi)容的高+上下padding+上下邊框
內(nèi)邊距
內(nèi)容與邊框的距離。
內(nèi)邊距的區(qū)域也會(huì)被背景渲染。
padding有四個(gè)方向：上下左右。
寫法：
1.小屬性
padding-left
padding-right
padding-top
padding-bottom
2.復(fù)合屬性寫法：
四種寫法：
一值法：
padding:20px;
上下左右的padding相等。
二值法
padding:20px 10px; 上下 左右
三值法：
padding:20px 10px
30px; 上 左右 下。
四值法：
padding：10px 20px 30px 40px; 上 右 下 左 順時(shí)針。
小技巧：
若只有單個(gè)方向的內(nèi)邊距與其他內(nèi)邊距不同，可以先設(shè)置總體，再用單一屬性單獨(dú)設(shè)置不同的內(nèi)邊距。
border 邊框
盒子占有的最外層的區(qū)域。
border是一個(gè)復(fù)合屬性。
border有三個(gè)要素：寬度，線的類型，顏色。
按三要素拆分：
border-width 設(shè)置寬度
border-style 設(shè)置線的類型
border-color 設(shè)置顏色
多重隨機(jī)標(biāo)簽