CSS Box Model 盒子模型

在html中的每個element(元素)都可以看作乙個矩形的盒子，矩形從內到外依次由元素的內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)組成。

在css的布局中，元素的矩形被稱為"box model"，即盒子模型。在瀏覽器渲染頁面時，盒子模型決定了元素的大小和位置。

以chrome瀏覽器中盒子模型為例：

content：內容區域；文字、出現的位置。css中的width、height屬性直接作用的區域。

padding：內邊距區域，存在於content 和 border 之間的區域。可使用css的屬性有padding-top、padding-right、padding-bottom、padding-left以及padding。

border：邊框區域，存在於padding 和 margin 之間的區域。在預設布局中border的寬度會設定為0，從而不顯示元素的邊框。

margin：外邊距區域。控制其他元素與當前元素的邊距距離。可使用css的屬性有margin-top、margin-right、margin-bottom、margin-left以及margin。

預設情況下，css中的width、height屬性是指content(內容)區域的寬高。

在dom中，獲取元素高寬有以下屬性：clientwidth/clientheight、offsetwidth/offsetheight、scrollwidth/scrollheight。

說明：包含內邊距、內容區域的寬度、高度；若含有滾動條，將會減去滾動條的寬度、高度。

公式：

element.clientwidth = padding-left + width + padding-right

element.clientheight = padding-top + height + padding-bottom

示例：

說明：包含了邊框、內邊距、內容區域以及滾動條等範圍的寬度、高度。

公式：12

element.offsetwidth = border-left + padding-left + width + padding-right + border-right

element.offsetheight = border-top + padding-top + height + padding-bottom + border-bottom

示例：

說明：與clientwidth、clientheight類似(包含內邊距、內容區域，但不包括滾動條)，不同的是scrollwidth、scrollheight與元素的overflow樣式屬性息息相關：

當塊級元素的內容超出元素大小時，其內容會根據overflow設定的值出現滾動條或內容溢位，scrollwidth、scrollheight包含了這些不可見的內容區域。

示例：

在預設情況下，css中的width和height屬性的值只會應用到元素的內容區域；而box-sizing屬性可修改此預設範圍。

box-sizing可設定的值有content-box(預設值)和border-box。

說明：表示css中的width和height屬性的值只會應用到元素的內容區域。

如設定乙個元素的width為200px，那麼只是這個元素的內容區域寬度有200px。

說明：表示元素的邊框和內邊距的範圍包含在css中的width、height內。

如設定乙個元素的width為200px，那麼此元素內容區域的寬度 = 200 - border - padding。

示例：

jquery提供了以下幾種獲取元素的寬度方法：

$(element).width()：獲取元素content(內容)區域的寬度。若元素的含有 box-sizing: border-box ，會減去相應的padding、boder。

$(element).innerwidth()：獲取元素 content區域 + padding 的寬度。

$(element).outerwidth()：獲取元素 content區域 + padding + boder 的寬度。

$(element).outerwidth(true)：獲取元素 content區域 + padding + boder + margin 的寬度。

示例圖：

原文**：