### 概念 盒子模型是css最核心的內容了,理解盒子模型可以更好的對頁面進行排版布局. 盒子模型又稱框模型(Box Model),它是由四要素組成,分別是: * 元素內容(content) * 內邊距(padding) * 邊框(border) * 外邊距(margin)-透明 ```js //外盒尺寸計算（元素空間尺寸) Element空間高度 = content height + padding + border + margin Element 空間寬度 = content width + padding + border + margin //內盒尺寸計算（元素大小） Element Height = content height + padding + border （Height為內容高度） Element Width = content width + padding + border ``` 一個標準的盒子模型的示意圖:  下面我們用一組代碼來演示不同的情況,如下圖的盒模型:  關于元素寬度獲取的幾種方式,及不同點: * `clientWidth`:包括元素寬度和padding,不含border的寬度值 * `offsetWidth`: dom元素實際寬度包括border和padding * `scrollWidth`:對于無滾動元素來講,同clientWidth,但如果內容出現滾動條,則包括滾動的寬度,也就是說scrollWidth的最小值是clientWidth,其中隨內容的寬度而變 * `$element.width()`:jquery元素的寬度,單指元素的寬度 > [代碼](http://jsrun.net/StYKp) ### 盒模型的疊加 兩個上下相鄰的盒模型,它們的外邊距即彼此的`margin-bottom`和`margin-top`會合并,合并準則以外邊距值較大的為彼此的實際外間距. 但是上述只針對在普通文檔流中的垂直塊元素,而行內元素,浮動框或者是絕對定位的元素,它們的外邊距不會發生合并. > [舉個栗子](http://jsrun.net/knYKp) ### 不得不說IE的怪異盒模型  ```js /*外盒尺寸計算（元素空間尺寸）*/ Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度) /*內盒尺寸計算（元素大小）*/ Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度) ``` **what?** 乍一看跟標準盒模型好像沒區別.但是仔細看,結合上圖,怪異盒模型元素的寬度就包含了元素內容,border和padding的寬度.還不明白? ```css .box{ width:200px; height:300px; background:#bc223d; text-align:center; color:#fff; margin:20px; padding:20px; border:3px solid #aaabbb; overflow-x:auto; box-sizing:border-box;//可講盒模型修改為怪異模型 } ``` ```js //怪異模型下元素寬度包括了內容的寬度,padding的寬度和border的寬度 $('.box').width();//=200-20*2-3*2=154px ``` > [代碼](http://jsrun.net/fnYKp) ### box-sizing 理解并掌握上述的兩種盒模型,那么`box-sizing`這個屬性相對來說更好理清了,它很好的實現了這兩種模型間的互相切換,`box-sizing`有如下的屬性: * `content-box`: 讓元素維持標準盒模型,即:`Element Width/Height = border+padding+content width/height` * `border-box`: 讓元素的寬度/高度等于元素內容的寬度/高度,換言之:此處的內容寬度/高度=width/height-border-padding; * `inherit`:繼承父元素`box-sizing`的屬性值 繼續上代碼,直觀展現下這兩種模型: > [點擊看代碼](http://jsrun.net/vnYKp) #### 瀏覽器兼容性 現代瀏覽器基本支持,IE8及以上版本支持該屬性，Firefox 需要加上瀏覽器廠商前綴`-moz-`，對于低版本的IOS和Android瀏覽器也需要加上`-webkit-` `boxder-box`更直接,更利于開發,所以有了如下的代碼: ```css *, *:before, *:after { 　　-moz-box-sizing: border-box; 　　-webkit-box-sizing: border-box; 　　box-sizing: border-box; } ``` ### 盒模型的應用,畫三角 ```css .triangle { width:0; height:0; border:100px solid transparent; border-top:100px solid #bc223d; } ``` > [代碼](http://jsrun.net/anYKp) > <p class="over">Over！</p>