盒模型

內填充：padding，填充物同盒子邊的距離
外邊距：margin，盒子同盒子間的距離
邊框：border

塊狀元素都具備盒子模型的特徵

盒模型–邊框
粗細、樣式、顏色，三個屬性

div{    border:2px  solid  red;}/*分開寫*/div{    border-width:2px;    border-style:solid;    border-color:red;}

1. border-style常見樣式：dashed-虛線、dotted-點線、solid-實線。
2. border-color，顏色也可設置為十六進制。border-color:#888，不要丟掉前方的#字號。
3. border-width，thin | medium | thick (不常用)，像素px比較常用。

CSS樣式中允許只為一個方向的邊框設置樣式。

div{border-bottom:1px solid red;}/**/border-top:1px solid red;border-right:1px solid red; border-left:1px solid red;

盒模型–寬度、高度
CSS內定義的寬、高，指的是填充物裡的內容範圍。因此一個元素的實際寬度(盒子的寬度)=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。元素的高度也是同理。

div{    width:200px;    padding:20px;    border:1px solid red;    margin:10px;    }

盒模型–填充
元素內容與邊框之間是可以設置距離的，稱之為”填充”。填充順序為：上、右、下、左(順時針)。

div{padding:20px 10px 15px 30px;}/*順序一定不要搞混*/div{   padding-top:20px;   padding-right:10px;   padding-bottom:15px;   padding-left:30px;}/*如 上、右、下、左 都為10px*/div{padding:10px;}/*如 上下為10px、左右為20px*/div{padding:10px 20px;}

盒模型–邊界
元素與其他元素之間的距離可以使用(margin)來設置。順序也為：上、右、下、左。

div{margin:20px 10px 15px 30px;}/**/div{   margin-top:20px;   margin-right:10px;   margin-bottom:15px;   margin-left:30px;}/*如 上、右、下、左 都為10px*/div{ margin:10px;}/*如 上下為10px、左右為20px*/div{ margin:10px 20px;}

padding和margin的區別：padding在邊框裡，margin在邊框外。