CSS 盒子模型
CSS中， Box Model叫盒子模型（或框模型），Box Model規(guī)定了元素框處理元素內(nèi)容（element content）、內(nèi)邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。在HTML文檔中，每個(gè)元素（element）都有盒子模型，所以說在Web世界里（特別是頁面布局），Box Model無處不在。
CSS盒子模型：W3C組織建議把所有的網(wǎng)頁上的對(duì)象都放在一個(gè)盒子中(在定義盒子寬高的時(shí)候，要考慮到內(nèi)填充，邊框，邊界的存在）
說明：上圖中，由內(nèi)而外依次是元素內(nèi)容（content）、內(nèi)邊矩（padding-top、padding-right、padding-bottom、padding-left）、邊框（border-top、border-right、border-bottom、border-left）和外邊距（marging-top、margin-right、margin-bottom、margin-left）。
和第一幅圖一樣，在上圖中，元素框的最內(nèi)部分是實(shí)際的內(nèi)容（element）；直接包圍內(nèi)容的是內(nèi)邊距（padding），內(nèi)邊距呈現(xiàn)了元素的背景（background）；內(nèi)邊距的邊緣是邊框（border）；邊框以外是外邊距（margin），外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素（其實(shí)元素的margin就是其所在父元素的padding）。元素的背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。
一個(gè)盒子的構(gòu)成：
盒子中的內(nèi)容：content
盒子的邊框：border
盒子邊框與內(nèi)容之間的距離：稱為填充---padding內(nèi)邊距（內(nèi)補(bǔ)?。?br/>如果有多個(gè)盒子存在，盒子與盒子之間的距離：稱為邊界---margin，外邊距（外補(bǔ)?。?/p>
?整個(gè)盒子模型在網(wǎng)頁中所占的寬度：左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界
CSS盒子模型的屬性：
內(nèi)容屬性：寬=width 高=height
內(nèi)填充屬性（內(nèi)容與邊框之間的距離）：padding
外邊距屬性：margin（使用該屬性的時(shí)候注意瀏覽器的兼容性）
內(nèi)填充與邊界的規(guī)則：
如果有四個(gè)參數(shù)：表示上右下左,也可以單單指定某個(gè)方向
如果只有一個(gè)參數(shù)：表示上右下左
如果有兩個(gè)參數(shù)： 第一個(gè)參數(shù)表示上下 第二個(gè)參數(shù)表示左右
如果三個(gè)參數(shù)：表示上 左右 下
邊框?qū)傩裕篵order
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
#box {
width:200px;
height:100px;
margin:10px 20px 30px 40px;
border:solid 10px red;
padding:10px 20px 30px 40px;
background-color:green;
}
#content {
width:100%;
height:100%;
background:blue;
}
</style>
</head>
<body>
<div id="box">
<div id="content"></div>
</div>
</body>
</html>
