7、盒子模型
CSS中有一種基礎設計模式叫盒模型，盒模型定義了Web頁面中的元素中如何來解析。CSS中每一個元素都是一個盒模型，包括html和body標簽元素。在盒模型中主要包括width、height、border、background、padding和margin這些屬性，而且他們之間的層次關係可以相互影響，盒模型的3D展示圖：
從圖中可以看出padding屬性和content屬性層曡background-image屬性，層曡background-color屬性，這個是存在的，它們四者之間構成了Ｚ軸（垂直屏幕的坐標）多重層曡關係。但是border屬性與margin屬性、padding屬性三者之間應該是平面上的並級關係，並不能構成Ｚ軸的層曡關係。
box-sizing：
在CSS中盒模型被分爲兩種，第一種是w3c的標準模型，另一種是IE的傳統模型，它們相同之處都是對元素計算尺寸的模型，具體說不是對元素的width、height、padding和border以及元素實際尺寸的計算關係，它們不同之處是兩者的計算方法不一致，原則上來說盒模型是分得很細的，這裡所看到的主要是外盒模型和内盒模型，如下面計算公式所示：
W3C標準盒模型
外盒尺寸計算（元素空間尺寸）
element空間高度=内容高度+内距+邊框+外距
element空間寬度=内容寬度+内距+邊框+外距
内盒尺寸計算（元素大小）
element空間高度=内容高度+内距+邊框（heigth爲内容高度）
element空間寬度=内容寬度+内距+邊框（width爲内容寬度）
IE傳統下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）
外盒尺寸計算（元素空間尺寸）
element空間高度=内容高度+外距（height包含了元素内容寬度、邊框、内距）
element空間寬度=内容寬度+外距（width包含了元素内容寬度、邊框、内距）
内盒尺寸計算（元素大小）
element空間高度=内容高度（height包含了元素内容寬度、邊框、内距）
element空間寬度=内容寬度（width包含了元素内容寬度、邊框、内距）
在CSS3中新增加了box-sizing屬性，能夠事先定義盒模型的尺寸解析方式。
語法槼則：
box-sizing: content-box | border-box | inherit
取值說明：
| 屬性值 | 屬性值說明 |
| content-box | 默認值，其讓元素維持W3C的標準盒模型，也就是說元素的寬度和高度（width/height）等於元素邊框寬度（border）加上元素内距（padding）加上元素内容寬度或高度（content width/height），也就是element width/hieght=border + padding + content width/hieght |
| border-box | 重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統的盒模型（IE6一下版本和IE6-7怪異模式），也就是會所元素的寬度或高度等於元素内容的寬度或高度。從上面盒模型介紹可知，這裡的内容寬度或高度包含了元素的border、padding、内容的寬度或高度（此處的内容寬度或高度=盒子的寬度或高度-邊框-内距）。 |
| inherit | 使元素繼承父元素的盒模型模式 |
最爲關鍵的是box-sizing中content-box和border-box兩者的區別，他們之間的區別可以通過下圖來展示，其對盒模型的不同解析：
index.html代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>盒子模型</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1>Header Content</h1> </div> <div id="page"> <div class="main"> <h1>Main Content</h1> </div> <div class="sidebar"> <h1>Siderbar Content</h1> </div> </div> <div id="footer"> <h1>Footer Content</h1> </div> </body> </html>
style.css代碼：
h1{
font-size:20px;
margin:0;
color:#fff;
}
#page:after,
#page:before{
content:"";
display:table;
}
#page:after{
clear:both;
overflow:hidden;
}
#page{
margin-bottom:20px;
}
#header{
width:100%;
background:green;
margin-bottom:10px;
padding:20px;
}
.margin{
width:60%;
padding:20px;
background:orange;
float:left;
}.sidebar{
width:38%;
float:right;
background:#f36;
padding:20px;
}
#footer{
width:100%;
background:#36f;
padding:20px;
clear:both;
}
#header,
.main,
.sidebar,
#footer{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
