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以及元素實際尺寸的計算關系，它們不同之處是兩者的計算方法不一致，原則上來說盒模型是分得很細的，這里所看到的主要是外盒模型和內盒模型，如下面計算公式所示：
外盒尺寸計算（元素空間尺寸） element空間高度＝內容高度＋內距＋邊框＋外距 element空間寬度＝內容寬度＋內距＋邊框＋外距 內盒尺寸計算（元素大?。? element高度＝內容高度＋內距＋邊框（height為內容高度） element寬度＝內容寬度＋內距＋邊框（width為內容寬度）
2.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/height = border + padding + content width / height |
|
border-box |
重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統的盒模型（IE6以下版本和IE6-7怪異模式），也就是說元素的寬度或高度等于元素內容的寬度或高度。從上面盒模型介紹可知，這里的內容寬度或高度包含了元素的border、padding、內容的寬度或高度（此處的內容寬度或高度＝盒子的寬度或高度—邊框—內距）。 |
|
inherit |
使元素繼承父元素的盒模型模式 |
其中最為關鍵的是box-sizing中content-box和border-box兩者的區別，他們之間的區別可以通過下圖來展示，其對盒模型的不同解析：
（單擊可放大）
在自適應布局當中，在元素基礎上添加內距padding，按照標準盒模型解析，往往會將布局撐破，但使用box-sizing的border-box值，可以讓你輕松完成。在CSS編輯器第49-53行輸入正確代碼，讓布局能正常顯示。注：考慮瀏覽器的兼容性。
補全代碼后，效果如下圖所示：
（單擊可放大）
溫馨提示：案例的效果如上圖所示才算順利通關，否則請再學習一遍本節的知識點！
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報
