一宜鸯、content
可為文字、圖片遮怜、標簽元素等
二淋袖、邊框border
盒子模型的邊框就是圍繞著內(nèi)容及補白的線，這條線你可以設置它的粗細锯梁、樣式和顏色(邊框三個屬性)即碗。
p{border:2px dotted #ccc;}
1、border-style（邊框樣式）常見樣式有：
- dashed（虛線）
- dotted（點線）
- solid（實線）
2涝桅、border-color（邊框顏色）中的顏色可設置為十六進制顏色（#888）
3拜姿、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O置為（但不是很常用），最常還是用象素（px）：
- thin
- medium
- thick
4冯遂、 允許只為一個方向的邊框設置樣式：如
div{border-bottom:1px solid red;}
三蕊肥、填充padding
元素內(nèi)容與邊框之間是可以設置距離的，稱之為“填充”蛤肌。填充也可分為上壁却、右、下裸准、左(順時針)展东。如下代碼：
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
元素與其它元素之間的距離可以使用邊界（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;}
總結(jié)一下：padding和margin的區(qū)別师妙，padding在邊框里，margin在邊框外骡显。
五疆栏、 寬度和高度
一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
width=100px;是指從哪到哪
Margin(外邊距) - 清除邊框外的區(qū)域惫谤，外邊距是透明的壁顶。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域溜歪，內(nèi)邊距是透明的若专。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像蝴猪。
例如：
//盒子
margin:20px;
border:2px;
padding:5px;
width:100px;
height:50px;
W3C盒模型大械魉ァ：
總寬度=width+2margin+2border+2padding=200+220+22+25=254px;
總高度=height+2margin+2border+2padding=50+220+22+25=104px;
IE 盒模型大小：
總寬度=width+2margin=100+220=140px;
總高度=height+2margin=50+220=90px;
只有250像素的空間自阱。讓我們設置總寬度為250像素的元素:
div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
