零基礎教你學前端-77、CSS盒模型

網站布局中，我們會使用各種各樣的元素，這些元素本質上就是一個個小的容器，也稱之為盒子，盒子里面可以放置文本，圖片，或者其他元素。

什么是 CSS 盒模型呢？

CSS 盒模型本質上是一個包裹每個 HTML 元素的盒子，包含 margin、border、padding 和 content 四個部分。

瀏覽器就是通過盒模型，來計算元素在網頁中占據的空間大小的。

前面我們介紹過這些盒模型的要素：Content，表示盒子的內容，包含文本、圖像等等。Padding，表示填充內容周圍的一個區域，它是透明的。Border，表示圍繞填充和內容的邊框。Margin，表示邊框以外的區域，它也是透明的。

我們來舉個例子。

創建一個 019-css-box-model 文件夾，在文件夾里創建一個 box-model-1.html 文件和一個box-model-1.css 文件。

構建 html 基礎代碼，引入樣式文件。為了便于比較效果，我們定義兩個 div 元素，添加不同的類名，補全文本。

HTML
<div class="box1">
    盒子模型組成部分:內容,內邊距,邊框,外邊距
</div>
<div class="box2">
    盒子模型組成部分:內容,內邊距,邊框,外邊距
</div>

CSS
* {
  margin:0;
  padding:0
}
div {
  width: 200px;
  height: 200px;
}
.box1 {
  background-color: orange;
  border:20px solid gray;
  padding:20px;
  margin:20px;
}
.box2 {
  background-color: yellow;
}

打開 CSS 文件，定義通配符選擇器，聲明樣式 margin: 0，padding: 0。取消所有元素默認的邊距和填充樣式。

定義 div 選擇器，聲明樣式：width: 200px，height: 200px。為兩個 div 元素添加寬度和高度。

定義 .box1 選擇器，聲明樣式：background-color: orange。

定義 .box2 選擇器，聲明樣式：background-color: yellow。

在瀏覽器里預覽效果，兩個有背景顏色的盒子就做好了。

給 box1 添加樣式：border: 20px solid gray，為橙色的盒子增加一個邊框。

對比黃色的盒子，橙色盒子總寬度增加了 40px，總高度也增加了 40px。

繼續給 box1 添加樣式：padding: 20px。

此時橙色的盒子繼續變大。對比黃色的盒子，寬度和高度又增加了40px。

繼續給 box1 添加樣式：margin: 20px。

這時我們發現，因為添加了外邊距，橙色盒子的位置發生了偏移。

通過這個例子我們發現，給元素添加內填充、邊框以及外邊距之后，盒子會變大并發生位置變化。

那么，如何在所有瀏覽器中正確設置一個元素的寬度和高度呢？這對于精確的頁面布局，意義重大！

計算盒子的寬度和高度，請牢記這兩個公式：

盒子的寬度 = 內容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距

盒子的高度 = 內容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距

再次強調：當應用 CSS 設置一個元素的 width 和 height 屬性時，只是設置了元素內容區域的寬度和高度。要計算一個元素的完整尺寸，必須要加上填充、邊框和邊距。

我們將上面這種計算元素大小的盒模型，稱作標準盒模型。

那能不能給元素設置了 margin 和 padding 屬性后，元素本身的寬高就固定為設置的這個值呢？這就要應用另外一種盒模型，叫做怪異盒模型。

給元素聲明 box-sizing 屬性，取值為 border-box，這個元素就按照怪異盒模型來呈現大小了。

我們先來做個例子。

在 019-css-box-model 文件夾下，創建一個 box-model-2.html 文件和一個box-model-2.css 文件。

構建 html 基礎代碼，引入樣式文件。為了便于比較效果，我們還是定義兩個 div 元素，添加不同的類名，補全文本。

HTML
<div class="box1">
    我是一個div,用來演示怪異盒子
</div>
<div class="box2">
    我是一個div,用來進行做比較
</div>

CSS
*{
    margin:0;padding:0
}
div{
    width: 200px;
    height:200px;
}
.box1{
    background-color: orange;
    box-sizing: border-box;
    border:20px solid gray;
    padding:20px;
    margin:20px
}
.box2{
    background-color: yellow;
}

打開 CSS 文件，定義通配符選擇器，聲明樣式 margin: 0，padding:0。取消所有元素默認的邊距和填充樣式。

定義 div 選擇器：聲明樣式：width: 200px，height: 200px。

定義 .box1 選擇器，聲明樣式：background-color: orange。

定義 .box2 選擇器，聲明樣式：background-color: yellow。

在瀏覽器里預覽效果，兩個有背景顏色的盒子就做好了。

給 box1 添加樣式：box-sizing: border-box，觸發怪異盒模型。繼續添加樣式 border: 20px solid gray，padding:20px。

可以看到，box1 添加了邊框和內邊距，但是大小并沒有改變，寬高仍然是200px。顯而易見，內容的大小被壓縮了。

繼續為 box1 添加樣式：margin: 20px。

大家可以猜一下，外邊距會不會繼續壓縮內容呢？

仔細觀察一下，box1 位置發生了偏移，觀察一下容器的大小，并沒有變化。

所以，怪異盒模型寬度和高度的計算公式為：

盒子的寬度 = CSS樣式設置的 width 值 + 左邊距 + 右邊距

盒子的高度 = CSS樣式設置的 height 值 + 左邊距 + 右邊距

實際上，box-sizing 屬性還有一個值： content-box，就是用來觸發元素的標準盒模型。這也是元素盒模型的默認值，如果沒有給元素設置 box-sizing 屬性，容器的大小就按照標準盒模型來計算。

回到樣式代碼，將 box1 的 box-sizing 屬性值修改為 content-box。

我們發現，容器總寬高變為了 320px。

注釋掉box-sizing: content-box，容器的總寬高仍然是 320px。

HTML
<!--回答問題: -->
<div class='box'></div>
<style>
    div {
        width:100px;
        height:100px;
        background-color:orange;
        box-sizing:content-box;
        border:10px solid gray;
    }
    .box {
        width:200px;
        padding:200px;
        border-top:10px solid yellow;
        margin:20px 30px;
    }
</style>

文章配套視頻鏈接： https://www.bilibili.com/video/BV1oU4y1278g/?p=81

簡介

在HTML中，有一個很重要的理論：塊元素和行內元素。在CSS中極其重要的一個理論——CSS盒子模型。在“CSS盒子模型”理論中，頁面中的所有元素都可以看成一個盒子，并且占據著一定的頁面空間。

一個頁面由很多盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構（往往是padding），二是理解多個盒子之間的相互關系（往往是margin）。

2 盒子模型概念

盒模型指的是網頁元素的結構。當指定一個元素的寬度或高度時，便設置了元素內容的尺寸，可以把每個元素都看成一個盒子，盒子模型是由4個屬性組成，號稱“盒尺寸四大家族”：

content（內容區），可以是文本或圖片 —— 變化多端
padding（內邊距），用于定義內容與邊框之間的距離 —— 溫和向內
margin（外邊距），用于定義當前元素與其它元素之間的距離 —— 激進對外
border（邊框），用于定義元素的邊框 —— 功勛卓越

此外，在盒子模型中，還有寬度（width）和高度（height）兩大輔助性屬性。記住，所有的元素都可以看成一個盒子。如下圖所示：

2.1 內容區

內容區是CSS盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他3個部分都是可選的。內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這里注意一點，width和height這兩個屬性是針對內容區content而言的，并不包括padding部分。當內容過多，超出width和height時，可以使用overflow屬性來指定溢出處理方式。

2.2 內邊距

內邊距，指的是內容區和邊框之間的空間，可以看成是內容區的背景區域。padding屬性接受長度值或百分比值，但不允許使用負值。關于內邊距的屬性有5種：padding-top、padding-bottom、padding-left、padding-right，以及綜合了以上4個方向的簡寫內邊距屬性padding。使用這5種屬性可以指定內容區與各方向邊框之間的距離。

2.2.1 元素的尺寸

因為CSS中默認的box-sizing是content-box，所以使用padding會增加元素的尺寸。

.box {
　  width: 80px;　  
    padding: 20px;
}

如果不考慮其他CSS干擾，此時.box元素所占據的寬度就應該是120像素（80px+20px×2），這其實是不符合現實世界的認知的，人們總是習慣把代碼世界和現實世界做映射，因此，新人難免會在padding的尺寸問題上踩到點坑。這也導致很多人樂此不疲地設置box-sizing 為border-box，甚至全局設置。

2.2.2 標簽元素內置的padding

ol/ul列表內置padding-left，但是單位是px不是em。
很多表單元素都內置padding。例如：所有瀏覽器<input>/<textarea>輸入框內置padding；所有瀏覽器<button>按鈕內置padding；所有瀏覽器<radio>/<chexkbox>單復選框無內置padding。

2.3 外邊距

外邊距，指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個重要手段。外邊距的屬性也有5種：margin-top、margin-bottom、margin-left、margin-right，以及綜合了以上4個方向的簡寫外邊距屬性margin。同時，CSS允許給外邊距屬性指定負數值，當外邊距為負值時，整個盒子將向指定負值的相反方向移動，以此產生盒子的重疊效果，這就是傳說中的“負margin技術”。

2.3.1 margin與元素尺寸

元素的內部尺寸

只有元素是“充分利用可用空間”狀態的時候，margin才可以改變元素的可視尺寸。比方說，如下CSS：

.header {
　width: 160px;　
  margin: 0 -5px;
}

此時元素寬度還是160像素，尺寸無變化。因為只要寬度設定，margin就無法改變元素尺寸，這和padding是不一樣的。

但是，如果是下面這樣的HTML和CSS：

<div class="header">
　  <div class="son">
</div></div>
.header { width: 160px; }
.menu {　margin: 0 -5px; }

則.menu元素的寬度就是165像素了，尺寸通過負值設置變大了，因為此時的寬度表現是“充分利用可用空間”。

元素的外部尺寸

只要元素具有塊狀特性，無論有沒有設置width/height，無論是水平方向還是垂直方向，即使發生了margin合并，margin對外部尺寸都著著實實發生了影響。

2.3.2 margin合并

塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合并為單個外邊距，這樣的現象稱為“margin合并”。

margin合并一般出現在以下3種場景：（1）相鄰兄弟元素margin合并。這是margin合并中最常見、最基本的。（2）父級和第一個/最后一個子元素。（3）空塊級元素的margin合并。
margin合并的計算規則把margin合并的計算規則總結為：“正正取大值”， “正負值相加” ，“負負最負值”。
margin合并的意義對于兄弟元素的margin合并其作用和em類似，都是讓圖文信息的排版更加舒服自然。父子margin合并的意義在于：在頁面中任何地方嵌套或直接放入任何裸<div>，都不會影響原來的塊狀布局。<div>是網頁布局中非常常用的一個元素，其語義是沒有語義，也就是不代表任何特定類型的內容，是一個通用型的具有流體特性的容器，可以用來分組或分隔。由于其作用就是分組的，因此，從行為表現上來看，一個純粹的<div>元素是不能夠也不可以影響原先的布局的。自身margin合并的意義在于可以避免不小心遺落或者生成的空標簽影響排版和布局。

2.3.3 margin:auto

margin:auto的填充規則如下。（1）如果一側定值，一側auto，則auto為剩余空間大小。（2）如果兩側均是auto，則平分剩余空間。

2.4 邊框

在CSS盒子模型中，邊框與我們之前學過的邊框是一樣的。邊框屬性有border-width、border-style、border-color，以及綜合了3類屬性的簡寫邊框屬性border。

border屬性總是能解決很多棘手的問題，在在圖形構建、體驗優化以及網頁布局這塊幾大放異彩，，同時保證其良好的兼容性和穩定性。下面我們一起看看border都有哪些精彩的特性表現。

2.4.1 為什么border-width不支持百分比值

我們通過比對筆記本、手機發現，雖然兩臺設備的尺寸差異很大，但是邊框的大小相比而言就可以忽略不計了。邊框是不會因為設備大就按比例變大的。因此，如果支持百分比值，是不是就意味著設備大了邊框也跟著變大？有一張圖片，大片區域都是白色的，在白底背景上和文字混在一起，就會有一片奇怪的空白區域，會讓人產生沒對齊的假象，此時，我們給這張圖片套個1px灰色邊框，區域就明顯了，對吧！設計的初衷就是為了這么點兒事，沒有需要使用百分比值的場景。于是，綜合這兩點，造成了border-width不支持百分比值。

2.4.2 border與圖形構建

border屬性可以輕松實現兼容性非常好的三角圖形效果，為什么可以呢？其底層原因受inset/outset 等看上去沒有實用價值的border-style屬性影響，邊框3D效果在互聯網早期其實還是挺潮的，那個時候人們喜歡有質感的東西，為了呈現逼真的3D效果，自然在邊框轉角的地方一定要等分平滑處理，然后不同的方向賦予不同的顏色。然后，這一轉角規則也被solid類型的邊框給沿用了。因此，我們就不難理解下面的4色邊框的表現了：

div {
　  width: 10px; height: 10px; 　  
    border: 10px solid; 　  
    border-color: #f30 #00f #396 #0f0;
}

運行一下上面的代碼看一下效果吧！

2.4.3 border與透明邊框技巧

這是提高用戶體驗的一個小技巧，尤其在移動端，我們的操作工具一般就是我們的手指，但是，我們的手指粗細可以媲美胡蘿卜，而屏幕尺寸就那么點兒，如果我們正在走路，則一些精致的圖標和按鈕很容易就點不中甚至誤點。

穩妥的方法是外部再嵌套一層標簽，專門控制點擊區域大小。如果對代碼要求較高，則可以使用padding或者透明border增加元素的點擊區域大小。

3 總結

現實生活中看到的盒子，有正方形、長方形、圓柱形等，依據形狀特點，可包裹不同物件。CSS中的盒子雖然沒有那么多的形狀，但在視覺呈現上不同類型的盒子還是會有很大的不同，有的盒子要占據一行，有的盒子不能定義外邊距、寬度和高度，有的盒子寬度和高度能自適應。CSS中用display指定盒類型（即框類型），常用的有 block（塊）、inline（行內）、inline-block（行內塊）、table（表格），以及CSS3新增的flexbox（伸縮盒）。 HTML 元素只有兩種默認的盒類型，即塊級元素（block-level element）和行內元素（inline-level element）。其中行內元素不可定義CSS屬性width、height、上下margin和上下padding。常用的span和div分別是行內元素和塊級元素。

由此可見，需要掌握的內容太多，要想學會所有布局相關的技術不太現實。高級的布局話題基于文檔流和盒模型等概念，這些是決定網頁元素的大小和位置的基本規則。因此理解和掌握如何設置元素的大小和位置至關重要。

4 最后的最后

為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！

SS盒模型本質上是一個盒子，每一個元素都被抽象成一個盒子，每一個盒子又包括四部分

內容(content)，內填充(padding)，邊框(border)，外邊距(margin)

盒子模型簡圖

標準盒子模型&&IE盒子模型

IE盒子模型

width = content-width + padding-width + border-widthheight = content-height + padding-height + border-height

標準盒子模型

width = content-widthheight = content-height

BFC塊級元素

一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染的一部分。它是塊盒子的布局發生，浮動互相交互的區域。

CSS2.1中規定滿足下列CSS聲明之一的元素便會生成BFC

- 根元素，即HTML元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell、table-caption
- position的值為absolute或fixed

作用

- 自適應兩欄布局
- 可以阻止元素被浮動元素覆蓋
- 可以包含浮動元素——清除內部浮動
- 分屬于不同的BFC時可以阻止margin重疊

可替換元素

在 CSS 中，可替換元素（replaced element）的展現效果不是由 CSS 來控制的。這些元素是一種外部對象，它們外觀的渲染，是獨立于 CSS 的簡單來說就是通過修改某個屬性就使得顯示變換的元素

常見替換元素

img/object/video/iframe/textarea/input

特征

- 內容和外觀不受頁面上CSS的影響
- 有默認的尺寸，并且在很多CSS上有自己的表達樣式

偽元素

::before

在元素內容之前插入額外生成的內容

::after

在元素內容之后插入額外生成的內容

::first–letter

選取元素的首個字符

::first–line

選取元素的第一行

::selection

對用鼠標鍵盤等已選取的文字部分應用樣式

::spelling-error

表示瀏覽器標記為不正確拼寫的文本段
只有一小部分CSS屬性可用于 ::spelling-error 偽元素選擇器：
color/background-color/cursor/caret-color/outline
text-decoration/text-emphasis-color/text-shadow

::grammar-error

偽元素應用于瀏覽器標識為語法錯誤的文本段
只有一小部分的css能夠應用在::grammar-error的選擇器中
color/background-color/cursor/text-emphasis-color/text-shadow/outline/text-decoration

::focus-within

當元素本身或其后代獲得焦點時，:focus-within偽類的元素就會有效

focus-within兼容情況

在線咨詢

上一篇：肖sir_html之基本使用（1）
下一篇：HTML5基礎學習 13-拖拽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

零基礎教你學前端-77、CSS盒模型

簡介