盒模型的定義
在瀏覽器中，每個元素都可以被認爲是盒模型。盒模型一般有以下屬性：display, position, float, width, height, padding, border, margin.
盒模型一般由 元素內容, padding, border, margin 組成 , 所以又有內盒和外盒的概念。其中內外盒元素的寬高計算如下：
- 內盒元素寬(高)
內盒元素寬(高) = 元素內容寬(高) + padding寬(高) + border寬(高)
- 外盒元素寬(高)
外盒元素寬(高) = 元素內容寬(高) + padding寬(高) + border寬(高) + margin寬(高)
tips： 可以看出外盒元素比內盒元素多個 margin 屬性。
由於不同瀏覽器的對於 CSS 實現差異，盒模型又分爲 CSS 標準模型 和 IE(IE6 以下版本) 傳統模型兩種模式。
其中這兩種盒模型的主要區別在於對 CSS 的 width(height) 屬性的計算方式，計算方式分別如下：
- CSS 標準模型
width(height) = 元素內容寬(高)
- IE 傳統模型
width(height) = 元素內容寬(高) + padding寬(高) + border寬(高)
解釋： 從以上公式也可以看出 width(height) 在 CSS 標準模型中是直接等於元素內容的寬(高)的，而在 IE 傳統模型中是等於元素內容、padding、border 的寬(高)之和的。
tips： 雖然傳統的盒模型只有在 IE6 以下的版本中存在，而且目前 IE6 的使用用戶非常少，但出於兼容性的考慮還是應該清除這兩種模式的區別。另外在 input 中，submit, reset, button 和 select 等元素仍然是基於傳統的盒模型的，如果給他們設置 border和padding，它們會向盒內延伸。
當然我們也可以 box-sizing 屬性來定義元素盒模型的模式。
box-sizing 有以下三種取值：
content-box：CSS 標準盒模型，width(height)與 元素內容寬(高) 相同。border-box： IE 傳統盒模型，width(height)是計算border,padding,元素內容的寬(高)之和。inherit：繼承父元素的盒模型
inline，block，inline-block 的區別
特性
- inline：設置寬高無效，
margin只對水平方向有效，padding在水平和垂直方向都有效，不換行。 - block：可以有效設置寬高，
margin對水平垂直方向都有效，padding在水平和垂直方向都有效，換行。 - inline-block：可以有效設置寬高，
margin對水平垂直方向都有效，padding在水平和垂直方向都有效，不換行。
元素
- inline：
a, span, i, em, strong, label... - block：
div, p, h1...h6, ol, ul, li, table, form... - inline-block：
img, input
position
absolute/fixed：不論inline，block，inline-block，都可以有效設置寬高，都可以有效設置margin, padding值，脫離文檔流，通過top, right, bottom, left定位。relative：相對於正常文檔流的位置，不改變盒模型的inline，block，inline-block特性。static：默認值