標(biāo)準(zhǔn)盒模型

（1）content 內(nèi)容

（2）padding 內(nèi)邊距

1）用來調(diào)整內(nèi)容(子元素)在容器（父元素）中的位置關(guān)系。

2）用來調(diào)整子元素在父元素中的位置關(guān)系。 注：padding屬性需要添加在父元素上。

3）padding值是額外加在元素原有大小之上的（會(huì)撐大盒子），如想保證元素大小不變，需從元素寬或高上減掉添加。

四種屬性

上方向padding-top:屬性值;

右方向pahdding-right:屬性值;? ? ?

下方向padding-bottom:屬性值;? ? ?

左方向padding-left:屬性值;

注意：padding值不允許是負(fù)值

簡(jiǎn)寫：

四個(gè)值：上 右 下 左 {padding:10px 20px 30px 40px;}

三個(gè)值：上? 左右? 下 {padding:10px 20px 30px ;}

二個(gè)值：上下? ? 左右 {padding:10px 20px ;}

一個(gè)值：四個(gè)方向 {padding:2px;}

padding區(qū)域在border與content之間；背景色和背景圖像會(huì)覆蓋padding和content組成的區(qū)域；

（3）border 邊框

border-color 邊框顏色

border-width 邊框大小（粗細(xì)）

border-style 邊框樣式

?border-style:solid/dashed/dotted/double solid:實(shí)線，dashed:虛線，dotted:點(diǎn)狀線， double:雙線，none/0(去掉邊框)

四個(gè)值：上 右 下 左? ? ?

三個(gè)值：上? ? 左右? ? 下? ?

二個(gè)值：上下? 左右? ? ? ??

一個(gè)值： 四個(gè)方向?

border-top-color/width/style 上邊框顏色/大小/樣式

border-right-color/width/style 右邊框顏色/大小/樣式

border-bottom-color/width/style 下邊框顏色/大小/樣式

border-left-color/width/style 左邊框顏色/大小/樣式

（4）margin 外邊距

在元素外邊的空白區(qū)域，用來表示盒子與盒子之間的距離

屬性值的4種方式：

四個(gè)值：上 右 下 左? ? ? ? {margin:10px? 2px? 4px? 3px? ;}?

三個(gè)值：上? ? 左右? ? 下? ? {margin:2px? 4px? 6px;}?

二個(gè)值：上下? 左右? ? ? ? {margin:2px? 4px;}?

一個(gè)值： 四個(gè)方向? ? ? ? ? {margin:2px;}

可單獨(dú)設(shè)置某一方向填充

上方向margin-top:屬性值;

右方向margin-right:屬性值;

下方向margin-bottom:屬性值;

左方向margin-left:屬性值;

計(jì)算盒子在網(wǎng)頁中大?。篶ontent+padding+border+margin