CSS盒模型

標籤：

本文根據在慕課網的學習筆記整理。

盒子模型：邊界+邊框+填充+內容

邊界

元素與其它元素之間的距離可以使用邊界（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在邊框外。

邊框

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設定它的粗細、樣式和顏色(邊框三個屬性)。

//如下面代碼為div來設定邊框粗細為2px、樣式為實心的、顏色為紅色的邊框：div{    border:2px  solid  red;}//上面是border代碼的縮寫形式，可以分開寫：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）。

4、css樣式中允許只為一個方向的邊框設定樣式：

div{border-bottom:1px solid red;}

填充

元素內容與邊框之間是可以設定距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。如下代碼：

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;}

內容

css內定義的寬（width）和高（height），指的是填充以裡的內容約制。

因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

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

 

CSS盒模型