CSS必學：你需要知道的盒子模型的秘密

作者:WangMin
格言:努力做好自己喜歡的每一件事

作為前端開發來說，要掌握的CSS基礎一定很多，那麼CSS中盒子模型肯定是必考必問必掌握的前端知識點，因為它是CSS基礎中非常重要的內容，接下來我們就一起來瞭解一下盒子模型吧！

什麼是盒子模型？

CSS 所有的HTML 標簽元素在網頁中都生成了一個描述該元素在HTML文檔佈局中所占空間的矩形框，我們可以形象地將它看作是一個盒子，它會把各種html元素按照設計需求包裹起來，將html元素進行封裝，就組成了各式各樣好看的網頁。

簡單一點來說，頁面中的每一個標簽，都可以看作是一個盒子，通過盒子的視角我們可以更直觀地進行網頁排版佈局.

盒子模型的組成以及大小的計算

盒子模型的四個組成屬性：內容區域（content）、填充區域（padding）、邊框（border）以及 外邊距區域（margin）

下麵來分別瞭解一下這四個屬性！

內容區（content）

內容區域（content）是盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以你想要展示的任何東西，例如文本、圖片等等多種類型。

這時候你會有一個疑問"內容區的大小如何確定呢？" 那麼這裡就可以提到width屬性和height屬性，這兩個屬性大家應該不陌生吧！

內容區域（content）就是由這兩個屬性組成的，使用width屬性和height屬性可以指定盒子內容區域的高度和寬度，如圖所示

案例1：

只給元素設置width屬性和height屬性，我們來看看盒子模型的大小是多少？

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        background:#f00;
    }
</style>

結果如圖所示：

從上圖中我們可以明顯地看出盒子模型的大小為200 * 200，正是元素的高度與寬度。

由此可以的出一個結論：當一個元素只有width屬性和height屬性時，那麼這個元素的內容區域的大小就是盒子模型的大小，

即盒子模型的大小=內容區域的大小.

邊框（border）

邊框是圍繞在內容區和填充四周的邊界

相信大家對border屬性應該十分熟悉吧！border屬性其實是 border-style、border-width和border-color 這三個屬性的簡寫方式，

它們分別對應的含義與屬性值如下表：

案例2：

在案例1的基礎上，再給元素設置boder屬性，我們來看看盒子模型的大小是多少呢？

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:3px solid #000;
        background:#f00;
    }
</style>

結果如圖所示：

從上圖中可以明顯的看出，我設置的邊框寬度明明是3px，為什麼瀏覽器顯示的是2.4px呢？大家這時候應該都很疑惑

這裡我給大家解答一下：這可能是因為你的瀏覽器縮放比例不是100%，如果瀏覽器比例是100%而值還是對的話，那麼可能是電腦的縮放比例不是100%，通常電腦比例都是125%，可以讓用戶視覺上由更好的體驗。如果你想要瀏覽器顯示出正確的數值，你可以將電腦的縮放比例改為100%。

那麼此時從圖中我們也可以看出盒子模型的大小為204.8 * 204.8

盒子模型的寬度=200（寬度）+ 2.4（左邊框）+2.4（右邊框）= 204.8

盒子模型的高度=200（高度）+ 2.4（上邊框）+2.4（下邊框）= 204.8

由此可以的出一個結論：當一個元素設置width屬性、height屬性以及border屬性時，

那麼這個元素的盒子模型的寬度 = width + 左邊框 + 右邊框，

元素的盒子模型的高度 = height + 上邊框 + 下邊框

元素的盒子模型的大小 = 元素的盒子模型的寬度 * 元素的盒子模型的高度

填充區域（padding）

填充區域是內容區域和邊框之間的空間，填充區域也可以叫做內邊距。

padding屬性是padding -top（上內邊距）、padding -bottom（下內邊距）、padding -left（左內邊距）、padding-right（右內邊距）這四個屬性的簡寫方式，常見的取值方式如下表：

案例3：

在案例1和案例2的基礎上，再給元素的上下內邊距設置為10px，左右內邊距設置為20px，我們來看看盒子模型的大小是多少呢？

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:3px solid #000;
        padding:10px 20px;
        background:#f00;
    }
</style>

結果如圖所示：

那麼此時從圖中我們也可以看出盒子模型的大小為244.8 * 224.8

盒子模型的寬度=200（寬度）+ 20 (左內邊距) + 2.4（左邊框）+ 20 (右內邊距) + 2.4（右邊框） = 244.8

盒子模型的高度=200（高度）+ 10 (上內邊距) + 2.4（上邊框）+ 10 (下內邊距) + 2.4（下邊框） = 224.8

由此可以的出一個結論：當一個元素設置width屬性、height屬性、border屬性以及padding屬性時，

那麼這個元素的盒子模型的寬度 = width + 左內邊距 + 左邊框 + 右內邊距 + 右邊框，

元素的盒子模型的高度 = height + 上內邊距 +上邊框 + 下內邊距 + 下邊框

元素的盒子模型的大小 = 元素的盒子模型的寬度 * 元素的盒子模型的高度

外邊距區域（margin）

外邊距區域位於盒子的最外面，是添加在邊框外周圍的空間，盒子與盒子之間的距離。外邊距區域（margin）使盒子與盒子之間不會緊湊地挨在一起，是CSS 佈局的一個很重要的屬性。

margin屬性跟padding屬性類似，是**margin -top（上外邊距）、margin -bottom（下外邊距）、margin -left（左外邊距）、margin-right（右外邊距） **這四個屬性的簡寫方式，常見的取值方式如下表：

案例4：

在案例1、案例2以及案例3的基礎上，再給元素的上下外邊距設置為10px，左右外邊距設置為30px，我們來看看盒子模型的大小是多少呢？

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:3px solid #000;
        padding:10px 20px;
        margin:10px 30px;
        background:#f00;
    }
</style>

結果如圖所示：

那麼此時從圖中我們也可以看出盒子模型的大小為244.8 * 224.8，跟案例3的結果一樣沒有改變。

由此可以的出一個結論：：margin屬性不會計算到盒子模型的大小裡面去，也就是說它不會影響盒子模型的大小，它影響的是盒子與盒子之間的距離

預設寬度的情況下，盒子模型大小的計算

我們在沒有設置寬度的情況下，瀏覽器顯示的寬度就是預設寬度。

舉個簡單的例子來說明一下

<div id="box">今天天氣真好啊！</div>
<style>
  #box{
       height: 100px;
       background:#ccc;
  }
</style>

結果如圖所示：

從上圖中可以看到，在沒有給元素#box設置寬度的情況下，它的預設寬度是1472px, 會鋪滿整個父元素，這裡#box的父元素是body，而body的寬度是根據你的電腦屏幕大小而定的，所以我這裡是#box的預設寬度為1472px。

案例5

當給一個沒有寬度的元素設置上下外邊距為20px,左右外邊距為30px時，也就是margin:20px 30px時，我們來看看盒子模型的大小是多少呢？

<div id="box">今天天氣真好啊！</div>
<style>
  #box{
       height: 100px;
       margin:20px 30px;
       background:#ccc;
  }
</style>

結果如圖所示：

從上圖中可以看到元素#box的高度沒變依舊是100px，預設寬度變為了是1412px，這是為什麼呢？那麼就跟設置的margin屬性有關了。

我們發現剛好1412px=1470px - 30px - 30px，這是因為當我們在沒有給元素設置寬度，並且還設置了margin屬性的情況下，它會在預設寬度的基礎上減去左右外邊距才會的到最終呈現在瀏覽器上的寬度，設置的上下外邊距不會對元素的高度產生影響，只會影響元素的上下位置。

也就是說當元素處於預設寬度，但設置了margin屬性的情況下時，元素的盒子模型寬度會受左右外邊距的影響，元素的盒子模型寬度不會受上下外邊距的影響。

此時元素的盒子模型寬度 = 預設寬度 - 左外邊距 - 右外邊距

元素的盒子模型高度 = height

案例6

當給一個沒有寬度的元素分別設置margin:20px 30px，padding:10px，border:3px solid #000；的情況下，我們來看看盒子模型的大小是多少呢？

<div id="box">今天天氣真好啊！</div>
<style>
  #box{
       height: 100px;
       margin:20px 30px;
       border:3px solid #000;
       padding:10px;
       background:#ccc;
  }
</style>

結果如圖所示：

從上圖可以看到元素的寬度跟上一個案例的寬度一樣沒有改變，依舊是1412px，而高度反而變為了124.8px，這是為什麼呢？

我明明給元素設置了padding:10px，border:3px solid #000；，按照案例2與案例3盒子模型大小的計算方式，應該會對元素大小有影響，但是這裡並沒有影響到元素大小，由此可以得到一個結論：當我們在沒有給元素設置寬度，但設置了padding屬性與border屬性的情況下時，左右內邊距與左右邊框不會影響到元素的預設寬度。這裡高度發生了變化，是因為這裡給元素高度設置了100px，按照案例2與案例3元素盒子模型大小的計算方式，最終元素盒子模型的高度會加上上下內邊距與上下邊框，就變成了100+10+2.4+10+2.4=124.8px。

那麼此時元素的盒子模型的寬度 = 預設寬度 - 左右外邊距（內容區域高度 + 左右內邊距 + 左右邊框）

元素的盒子模型的高度 = height + 上下邊框 +上內邊距 +下邊框 +下內邊距

總結

當一個元素沒有設置寬度，也就是預設寬度的情況下，設置的左右外邊距會影響到元素的盒子模型的大小，設置的左右內邊距和左右邊框不會影響到元素的盒子模型的大小。元素的盒子模型的大小會不會受margin屬性的影響取決於這個元素有沒有設置寬度。

盒子模型的分類

CSS樣式中明確將盒子模型分為標準盒子模型與怪異盒子模型。怪異盒子模型也稱為IE盒子模型。

其主要的屬性為box-sizing，當屬性值為：content-box時，該元素的盒子模型為標準盒子模型；

當屬性值為：border-box時，該元素的盒子模型為怪異盒子模型；

當未設值box-sizing屬性時，該元素的盒子模型也為標準盒子模型。

標準盒子模型

上述案例中所提到的都是標準盒子模型，在標準模式下，盒子模型大小的計算方式如下：

元素的盒子模型的寬度 = width + 左內邊距 + 左邊框 + 右內邊距 + 右邊框

元素的盒子模型的高度 = height + 上內邊距 +上邊框 + 下內邊距 + 下邊框

元素的盒子模型的大小 = 元素的盒子模型的寬度 * 元素的盒子模型的高度

詳細案例可以往上翻閱查看

怪異盒子模型 (IE盒子模型)

案例7：

在上述案例的基礎上，再給元素設置上box-sizing屬性，並且屬性值為border-box時，我們來看看盒子模型的大小是多少呢？

<div id="box"></div>
<style>
    #box{
        width: 300px;
        height: 300px;
        border:3px solid #000;
        padding:10px 20px;
        margin:10px 30px;
        box-sizing: border-box;
        background:#f00;
    }
</style>

結果如圖所示：

從上述案例中第二張圖中我們可以看出盒子模型的大小為200 * 200，不正是我設置的寬度與長度嗎？會從上述案例中第一張圖中找到答案。圖中左右內邊距以及左右邊框以及內容區域的寬度是包含在設置的寬度內的，也就是說在怪異模式下，盒子模型的寬度=width（左右內邊距+左右邊框+內容區域的寬度）;圖中上下內邊距以及上下邊框以及內容區域的高度是包含在設置的高度內的，也就是說在怪異模式下，盒子模型的高度=height（上下內邊距+上下邊框+內容區域的高度）

註意：在標準盒子模型和怪異盒子模型 (IE盒子模型)下，margin屬性都不會計算到盒子模型的大小裡面去。

以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這裡!!