剛完過年，大家是不是都在物色新的工作機會呢？可能在面試的時候，我們大多數人都會被問到乙個問題，那就是css盒模型。這個看似簡單的問題，實際上卻不太好回答，今天我們從以下幾個方面談一談css盒模型：
1、什麼是盒模型
2、標準盒模型和怪異盒模型（ie盒模型）的區別
3、我們應該如何設定和選擇盒模型
4、瀏覽器相容問題
css盒模型本質上是乙個盒子，封裝周圍的html元素，從內到外它包括：
內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）
content： 盒子的內容，顯示文字和影象
padding： 清除內容周圍的區域
border： 包裹內容和內邊距的外框
margin： 清除邊框外的區域
在標準盒模型下，設定的width和height就是content的width和height
盒子總寬度 = width + margin(left + right) + border(left + right) + padding(left + right)
盒子總高度 = height + margin(top + bottom) + border(top + bottom) + padding(top + bottom)
而怪異盒模型（ie盒模型）下，設定的width和height包括了content、padding和border。
盒子總寬度 = width + margin(left + right)
盒子總高度 = height + margin(top + bottom)
頁面渲染時，dom 元素所採用的 布局模型。可通過box-sizing進行設定。根據計算寬高的區域可分為：
content-box (w3c 標準盒模型)
border-box (ie 盒模型)
padding-box
margin-box (瀏覽器未實現)
那我們應該在什麼時候使用怪異盒模型什麼時候不使用怪異盒模型呢？
假如我們接的需求是需要我們寫兩個div元素佔滿父元素（如下圖）這兩個元素大小完全相同：
這個時候就是我們的標準盒模型
*
我是上邊
我是下邊
我是上邊
我是下邊
一、將上面的元素的width減去border（left+right），height減去border（top+bottom）
我是上邊
我是下邊
*
我是上邊
我是下邊
一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，ie5.x 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
ie8 及更早ie版本不支援設定填充的寬度和邊框的寬度屬性。
解決ie8及更早版本不相容問題可以在html頁面宣告 即可。
關於CSS盒模型
在我們使用css進行網頁布局的時候，我們一定會用到的就是盒子模型，那麼盒模型是有兩個標準的，乙個是標準盒模型，乙個是ie盒模型 怪異盒模型 而在討論標準盒模型之前首先要把盒模型的寫法知道 內容屬性 屬性實際作用 width 設定內容的寬度 height 設定內容的高度 max width 設定內容的...
前端 關於CSS盒模型
矩形區域中各個屬性的取值只有margin可以取負值，只有width和margin可以取auto關鍵字，border不能為百分數，其他屬性都只能取 正的數字或者正的百分數。其中margin和padding設定的值是乙個塊區域的垂直高度，這塊區域的長和寬是隨著內容的width和height變化 而變化的...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...