今天同學發給了我一份前端基礎的面試題，第一道便是對css盒子模型的理解，我看到的第一眼想到的是div，然後就...懵逼了，知其然不知其所以然。所以打算寫一寫盒子模型的概念理解啥的，如有寫的不當的地方，望指正見諒！

1、css3盒子模型

個人的理解是頁面上所有的html元素都可以看作是盒子，即整個html頁面就是由無數個盒子通過特定的布局結合在一起的，每個盒子包括內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）。

（一般來說margin有兩種形式，一種是盒子與瀏覽器窗口的外邊距，還有一種是盒子與相鄰盒子的外邊距）

2、關於盒子的寬高的問題

標準盒子模型，也就是咋們的大哥W3C規定的盒子模型，這種情況下：css中定義的寬高 = 盒子實際內容（content）的寬高，盒子的總寬高 = css定義的寬高 + padding + border + margin（註意計算時左右和上下的padding、margin都是兩個）

如下定義了一個盒子，css代碼和html代碼如下：

1 #box{
2             width: 200px;
3             height: 200px;
4             margin: 10px;
5             padding
 
: 10px;
6             border: solid red;/* border默認寬度是3px 所以沒寫直接3px了*/
7         }

1 <div id="box">
2         我是一個盒子
3     </div>

在瀏覽器開發工具下的截圖如下：

從圖中可以看出:藍色部分（200*200 )是盒子的content，綠色的是padding，黃色的是border, 深黃色是margin

但在IE瀏覽器中盒子的寬高計算方式會不一樣：

IE盒子模型也叫怪異盒模型

在該模式下，瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和；即在怪異模式下的盒模型，盒子的（content）寬度+內邊距padding+邊框border寬度=我們設置的width(height也是如此)，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin。
　　寫到最後就有點想要放棄了，望路過的大佬見諒！湊合看吧~

前端面試必備的css盒子模型