1.概述

1.1前言

css盒子模型具備的屬性：內容(content)、填充(padding)、邊框(border)、邊界(margin)；而日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以用盒子模式來理解。

生活中的盒子說明：

內容(content)：盒子裏裝的東西。

填充(padding)：怕盒子裏裝的東西(貴重的)損壞而添加的泡沫或者其他抗震的輔料。

邊框(border)：盒子本身。

邊界(margin)：盒子擺放的時候不能全部堆在一起，留一些空隙保持通風，同時也為了方便取出。

網頁中的盒子說明：

內容(content)：文字、圖片等元素(一張圖片裏不能放東西，它自己就是自己的內容，故不是盒子

填充(padding)：像素填充，可有可無。

邊框(border)：像素展示，可有可無。

邊界(margin)：像素填充，可有可無。

兩種盒子的差異：生活中的盒子中東西一般不能大於盒子，否則盒子會被撐壞。而css盒子具有彈性，裏邊的東西大過盒子本身最多把它撐大，但它不會損壞。

1.2 組成結構

以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。

1.2.1 示例

說明：樣式寬度和真實占有寬度，不是同一內容。

2.盒子模型

標準盒子模型與IE盒子模型差異說明：

• 在CSS盒子模型(Box Model)規定了屬性為：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)
• 在CSS的標準盒子模型中，width和height指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。IE盒子模型中，width和height指的是內容區域+邊框(左右或上下之和)+內邊距(左右或上下之和)的寬度和高度。

2.1 標準盒子模型

2.2 IE盒子模型

2.3 盒子說明【標準盒子模型】

內容：width、height

盒子樣例(真實占有寬高都為：302*302)：

.box1{
        width: 100px;
        height: 100px;
        padding: 100px;
        border: 1px solid red;
   }
/*盒子真實占有寬度 = 左border + 左padding + width + 右padding + 右border  盒子真實占有高度 = 上border + 上padding + height + 下padding + 下border*/
.box2{
        width: 250px;
        height: 250px;
        padding: 25px;
        border: 1px solid red;
    }

盒子模型：

總結：

如果想保持一個盒子的真實占有高寬不變，那麽加width/height的時候，就要減相應的padding。加padding的時候就要減相應的width/height。因為盒子變胖是災難性的，會把別的盒子擠下去。

3.元素的寬與高

默認情況下，CSS中width、height屬性是指content(內容)區域的寬高。

在DOM中，獲取元素高寬有以下屬性：clientWidth/clientHeight、offsetWidth/offsetHeight、scrollWidth/scrollHeight。

3.1 clientWidth、clientHeight

說明：對象內容的可視區的寬度、高度；包含內邊距、內容區域的寬度、高度，不包滾動條等邊線。

公式：

element.clientWidth = padding-left + width + padding-right
element.clientHeight = padding-top + height + padding-bottom

示例：

3.2 offsetWidth、offsetHeight

說明：對象整體的實際寬度、高度；包含了邊框、內邊距、內容區域以及滾動條等範圍的寬度、高度；

公式：

element.offsetWidth = border-left + padding-left + width + padding-right + border-right
element.offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom

示例：

3.3 scrollWidth、scrollHeight

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

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

示例：

4. box-sizing

在默認情況下，CSS中的width和height屬性的值只會應用到元素的content(內容區域)，而box-sizing屬性可修改此默認範圍。

box-sizing的值有content-box(默認值)和border-box。

4.1 box-sizing:content-box

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

如設置一個元素的width為200px，那麽只是這個元素的內容區域寬度有200px。

4.2 box-sizing:border-box

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

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

5. jQuery中元素寬度(高度)

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 的寬度。

示例圖：

CSS Box Model 盒子模型