盒模型

問題：簡述 CSS 盒模型

一、塊級盒子（Block box） 和 行內盒子（Inline box）

在 CSS 中我們廣泛地使用兩種“盒子” —— 塊級盒子 (block box) 和 行內盒子 (inline box)，這兩種盒子會在頁面流（page flow）和元素之間的關系方面表現出不同的行為，我們這里不細分析如果轉換他們的行為，僅做了解，

1.1 塊級（block）盒子會表現出以下行為:

• 盒子會在行內的方向上擴展并占據父容器在該方向上的所有可用空間，在絕大數情況下意味著盒子會和父容器一樣寬
• 每個盒子都會換行
• width 和 height 屬性可以發揮作用
• 內邊距（padding）, 外邊距（margin） 和 邊框（border） 會將其他元素從當前盒子周圍“推開”

常見的塊級元素：

div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset

1.2 行級（inline）盒子會表現出以下行為:

• 盒子不會產生換行，
• width 和 height 屬性將不起作用，
• 垂直方向的內邊距、外邊距以及邊框會被應用但是不會把其他處于 inline 狀態的盒子推開，
• 水平方向的內邊距、外邊距以及邊框會被應用且會把其他處于 inline 狀態的盒子推開，

常見的行內元素有：

a, span, label, strong, em, br, img, input, select, textarea, cite,

一個簡單的示例了解以下：

二、盒模型的組成

完整的 CSS 盒模型應用于塊級盒子，行內盒子只使用盒模型中定義的部分內容，模型定義了盒的每個部分：

• content：內容
• padding：包圍在內容區域外部的空白區域——內邊距
• border：邊框盒包裹內容和內邊距——邊框
• margin：這是最外面的區域，是盒子和其他元素之間的空白區域——外邊距

合在一起就可以創建我們在頁面上看到的內容，為了增加一些額外的復雜性，有一個標準的和替代（IE）的盒模型，

在chrome瀏覽器下可查看元素盒模型，如下圖：

2.1 內邊距（padding）

我們把月餅和月餅盒的距離稱為盒子模型的 內邊距

內邊距位于邊框和內容區域之間，與外邊距不同，您不能有負數量的內邊距，所以值必須是0或正的值，

我們可以使用padding簡寫屬性控制元素所有邊，或者每邊單獨使用等價的普通屬性：

padding-top
padding-right
padding-bottom
padding-left

您還可以更改類.container的內邊距，這將在容器和方框之間留出空間，任何元素上的內邊距都可以更改，并在其邊界和元素內部的任何內容之間留出空間，

2.2 外邊距（margin）

月餅盒與另一個月餅盒之間的距離，我們管他叫外邊距

外邊距是盒子周圍一圈看不到的空間，它會把其他元素從盒子旁邊推開， 外邊距屬性值可以為正也可以為負，設定負值會導致和其他內容重疊，無論使用標準模型還是替代模型，外邊距總是在計算可見部分后額外添加，

我們可以使用margin屬性一次控制一個元素的所有邊距，或者每邊單獨使用等價的普通屬性控制：

margin: 10px
// 等于
margin-top: 10px
margin-right: 10px
margin-bottom: 10px
margin-left: 10px

在下面的示例中，可以看一下測驗元素在外邊距設定為正時是如何推開周邊元素，以及設定為負時，是如何收縮空間的，

外邊距折疊（margin塌陷）

理解外邊距的一個關鍵是外邊距折疊的概念，如果你有兩個外邊距相接的元素，這些外邊距將合并為一個外邊距，即最大的單個外邊距的大小，

在下面的例子中，我們有兩個段落，頂部段落的頁 margin-bottom為50px，第二段的margin-top 為30px，因為外邊距折疊的概念，所以框之間的實際外邊距是50px，而不是兩個外邊距的總和，

.one {
  margin-bottom: 50px;
}

.two {
  margin-top: 30px;
}
    
<div class="container">
  <p class="one">I am paragraph one.</p>
  <p class="two">I am paragraph two.</p>
</div>

如果你減少 .two 內的margin-top，實際上沒有變化的，至于為什么以及如何解決它，我們在這不做討論，

2.3 邊框（border）

月餅盒的邊，在樣式表里被稱為邊框

它是在邊距和填充框之間繪制的，

• 如果您正在使用標準的盒模型，邊框的大小將添加到框的寬度和高度，
• 如果您使用的是替代盒模型，那么邊框的大小會使內容框更小，因為它會占用一些可用的寬度和高度，

為邊框設定樣式時，有大量的屬性可以使用——有四個邊框，每個邊框都有樣式、寬度和顏色，我們可能需要對它們進行操作，

可以使用border屬性一次設定所有四個邊框的寬度、顏色和樣式，

分別設定每邊的寬度、顏色和樣式，可以使用：

border-top
border-right
border-bottom
border-left

設定所有邊的顏色、樣式或寬度，請使用以下屬性：

border-width
border-style
border-color

設定單邊的顏色、樣式或寬度，可以使用最細粒度的普通屬性之一：

border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color

三、標準盒模型

在標準模型中，如果你給盒設定 width 和 height，實際設定的是 content box， padding 和 border 再加上設定的寬高一起決定整個盒子的大小， 見下圖：

如果使用標準模型，則寬度 = 410px (300 + 50 + 50 + 5 + 5)，由margin之外的其他屬性組成，

注: margin 不計入實際大小 —— 當然，它會影響盒子在頁面所占空間，但是影響的是盒子外部空間，

盒子的范圍到邊框為止 —— 不會延伸到margin，

四、替代模型（IE）

你可能會認為盒子的大小還要加上邊框和內邊距，這樣很麻煩，就比如在我們前端在開發頁面時，經常只知道盒子的寬高，總不能我們還要備一個計算器，計算內外邊距吧？

因為這個原因，css還有一個替代盒模型，使用這個模型，所有寬度都是可見寬度，所以：

內容寬度 = 該寬度 - border - padding，

大家可以看到child的寬度就為300 - 50 - 50 - 5 - 5 = 190px，

默認瀏覽器會使用標準模型，如果需要使用替代模型，可以通過為其設定 box-sizing: border-box 來實作，

.box {
  box-sizing: border-box;
} 

如果你希望所有元素都使用替代模式，而且確實很常用，設定 box-sizing 在 元素上，然后設定所有元素繼承該屬性，正如下面的例子，如果想要深入理解，請看 the CSS Tricks article on box-sizing，

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

最后你應該一眼就能看出來兩個盒子之前的區別了吧？

寫在最后

本文是《CSS基礎系列》第二篇文章

如果對你有所幫助不妨給本專案的github 點個 star，這是對我最大的鼓勵

關于我

• 花名：余光
• WX：j565017805
• 沉迷 JS，水平有限，虛心學習中

其他沉淀

• Github: Js 版 LeetCode 題解
• 前端進階筆記
• CSDN 博客匯總