CSS盒模型

頁面中任意一個(gè)元素都可以看成是一個(gè)盒子，通常習(xí)慣將div當(dāng)成是一個(gè)盒子

?盒子的組成：

????????內(nèi)容

??????????content（css中設(shè)置的寬高）

????????內(nèi)邊距

??????????padding

????????邊框

??????????border

????????外邊距

??????????margin

??????內(nèi)邊距：元素內(nèi)容到邊框之間的距離，就是內(nèi)邊距

????????padding：

??????????取值：

????????????padding:v1; --------------- 四個(gè)方向添加相同內(nèi)邊距

????????????padding:v1 v2; --------------- v1:上下???v2：左右

????????????padding:v1 v2 v3; --------------- v1:上??v2：左右??v3:下

????????????padding:v1 v2 v3 v4; --------------- v1:上??v2：右??v3:下??v4:左

??????????給具體某一個(gè)方向設(shè)置內(nèi)邊距：

????????????padding-方向詞

??????????????方向詞：top/right/bottom/left

????????元素添加內(nèi)邊距特點(diǎn)：

??????????1、背景顏色會(huì)蔓延到內(nèi)邊距上

??????????2、元素添加邊距會(huì)把盒子撐大

??????外邊距：元素邊框到邊框之間間距（邊框以外的距離）

????????margin：

??????????取值：

????????????margin:v1; --------------- 四個(gè)方向添加相同外邊距

????????????margin:v1 v2; --------------- v1:上下???v2：左右

????????????margin:v1 v2 v3; --------------- v1:上??v2：左右??v3:下

????????????margin:v1 v2 v3 v4; --------------- v1:上??v2：右??v3:下??v4:左

??????????給具體某一個(gè)方向設(shè)置內(nèi)邊距：

????????????margin-方向詞

??????????????方向詞：top/right/bottom/left

??????盒子寬度計(jì)算 = 內(nèi)容寬 + 左右內(nèi)邊距 + 左右邊框 + 左右外邊距

??????盒子高度計(jì)算 = 內(nèi)容高 + 上下內(nèi)邊距 + 上下邊框 + 上下外邊距