盒模型

1. 盒模型

CSS 盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素

CSS 中組成一個塊級盒子需要:

• Content box（內容）: 這個區域是用來顯示內容，大小可以通過設置 width 和 height
• Padding box（內邊距）: 包圍在內容區域外部的空白區域； 大小通過 padding 相關屬性設置
• Border box（邊框）: 邊框盒包裹內容和內邊距。大小通過 border 相關屬性設置
• Margin box（外邊距）: 這是最外面的區域，是盒子和其他元素之間的空白區域。大小通過 margin 相關屬性設置

**Tips：**背景應用于由內容和內邊距、邊框組成的區域

1-1 塊級盒子和內聯盒子

可以通過 display 屬性值來更改內部顯示類型

display: block; /* 塊級盒子 */ display: inline; /* 內聯盒子 */

塊級盒子

一個被定義成塊級的（block）盒子會表現出以下行為:

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

內聯盒子

如果一個盒子對外顯示為 inline，那么他的行為如下:

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

1-2 標準盒模型和IE盒模型

可以通過 box-sizing 屬性來設置盒子模型

box-sizing: border-box; /* IE盒模型 */ box-sizing: content-box; /* 標準盒模型 */

• content-box —— 默認值，標準盒子模型

  • 設置的 width 與 height 只包括內容（content box）的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）

  • 尺寸計算公式：

    盒子實際寬度 = border*2 + padding*2 + content box內容寬度 盒子實際高度 = border*2 + padding*2 + content box內容高度設置的盒子寬度 = content box內容寬度 設置的盒子高度 = content box內容高度

• border-box —— IE盒模型

  • 設置的 width 與 height 包括內容（content box）的寬和高，邊框（border），內邊距（padding），但不包括外邊距（margin）

  • 尺寸計算公式：

    盒子實際寬度 = border*2 + padding*2 + content box內容寬度 盒子實際高度 = border*2 + padding*2 + content box內容高度設置的盒子寬度 = border*2 + padding*2 + content box內容寬度 設置的盒子高度 = border*2 + padding*2 + content box內容高度

2. CSS尺寸

CSS 尺寸屬性允許你控制元素的高度（height）和寬度（width）

屬性描述

height	設置元素的高度
width	設置元素的寬度
max-height	設置元素的最大高度
max-width	設置元素的最大寬度
min-height	設置元素的最小高度
min-width	設置元素的最小寬度

一般所指的高度和寬度是指下圖中紅線標示的區域

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-iSeSBs64-1653472562436)(https://raw.githubusercontent.com/xiaofeilalala/DocsPics/main/imgs/20211114195151.png)]

2-1 width 和 height

height 屬性設置元素的高度。行內非替換元素（如：<a>,<span>,影響他們高度的是line-height屬性）會忽略這個屬性

width 屬性設置元素的寬度。行內非替換元素（如：<a>,<span>）會忽略這個屬性

• auto 默認。瀏覽器會計算出實際的寬度
• length 使用 px, cm, mm, em 等單位定義寬度
• % 基于包含它的塊級對象的百分比定義寬度

div {width: auto;height: auto; }div {width: 100px;height: auto; }

2-2 max-width 和 max-height

max-height 屬性設置元素的最大高度

該屬性值會對元素的高度設置一個最高限制。因此，元素可以比指定值矮，但不能比其高。不允許指定負值

設置最大高度后，段落的高度不會超過最大高度，但文本會溢出，其他部分可以覆蓋到溢出的部分

max-width 定義元素的最大寬度

該屬性值會對元素的寬度設置一個最高限制。因此，元素可以比指定值窄，但不能比其寬。不允許指定負值

• none 默認。對元素的寬度沒有限制
• length 使用 px, cm, mm, em 等單位定義元素的最大寬度值
• % 基于包含它的塊級對象的百分比定義最大寬度

div {/* 元素的最大寬度不能超過200px */max-width: 200px; }div {/* 元素的最大高度不能超過200px */max-height: 200px; }

2-3 min-width 和 min-height

min-height 屬性設置元素的最小高度

該屬性值會對元素的高度設置一個最低限制。因此，元素可以比指定值高，但不能比其矮。不允許指定負值

min-width 屬性設置元素的最小寬度。

該屬性值會對元素的寬度設置一個最小限制。因此，元素可以比指定值寬，但不能比其窄。不允許指定負值

• length 使用 px, cm, mm, em 等單位定義元素的最小高度值，默認值是0
• % 基于包含它的塊級對象的百分比定義最小高度

div {/* 元素的寬度最低為100px */min-width: 100px; }div {/* 元素的高度最低為100px */min-height: 100px; }

3. 邊框

CSS邊框屬性允許你指定一個元素邊框的樣式和顏色

• border：簡寫屬性，用于把針對四個邊的屬性設置在一個聲明
• border-width：簡寫屬性，用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度
• border-style：簡寫屬性，用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式
• border-color：簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色

border: border-width border-style border-color

3-1 邊框寬度

用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度

border-width: thin|medium|thick|length; 值描述

thin	定義細的邊框。
medium	默認。定義中等的邊框。
thick	定義粗的邊框。
length	允許您自定義邊框的寬度。
inherit	規定應該從父元素繼承邊框寬度。

3-2 邊框樣式

用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset; 值描述

none	定義無邊框。
hidden	與 “none” 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。
dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed	定義虛線。在大多數瀏覽器中呈現為實線。
solid	定義實線。
double	定義雙線。雙線的寬度等于 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決于 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決于 border-color 的值。
inset	定義 3D inset 邊框。其效果取決于 border-color 的值。
outset	定義 3D outset 邊框。其效果取決于 border-color 的值。
inherit	規定應該從父元素繼承邊框樣式。

3-3 邊框顏色

設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色

值說明

color	指定背景顏色
transparent	指定邊框的顏色應該是透明的。這是默認
inherit	指定邊框的顏色，應該從父元素繼承

顏色是通過CSS最經常的指定：

• 顏色的名稱
• HEX 十六進制
• RGB
• RGBA
• HSL
• HSLA

3-4 設置各邊屬性

css邊框可以設置元素各邊的邊框寬度、邊框樣式、邊框顏色

/* 設置順序 */ top -> right -> bottom -> leftborder-style：屬性1 屬性2 屬性3 屬性4; 上->右->下->左border-style：屬性1 屬性2 屬性3; 上->左右->下border-style：屬性1 屬性2; 上下->左右border-style：屬性1; 上下左右屬性相同

• border-top：簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中

  • border-top-width：設置元素的上邊框的寬度
  • border-top-style：設置元素的上邊框的寬度
  • border-top-color：設置元素的上邊框的寬度

• border-right：簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中

  • border-right-width：設置元素的右邊框的寬度
  • border-right-style：設置元素的右邊框的寬度
  • border-right-color：設置元素的右邊框的寬度

• border-bottom：簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中

  • border-bottom-width：設置元素的下邊框的寬度
  • border-bottom-style：設置元素的下邊框的樣式
  • border-bottom-color：設置元素的下邊框的顏色

• border-left：簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中

  • border-left-width：設置元素的左邊框的寬度
  • border-left-style：設置元素的左邊框的寬度
  • border-left-color：設置元素的左邊框的寬度

4. 輪廓

輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用

輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度

可以設置的屬性分別是（按順序）：

outline-color --> outline-style --> outline-width

outline是圍繞元素。它是圍繞元素的邊距。但是，它是來自不同的邊框屬性

outline不是元素尺寸的一部分，因此元素的寬度和高度屬性不包含輪廓的寬度

outline是不占空間的，既不會增加額外的width或者height

• outline：在一個聲明中設置所有的輪廓屬性
• outline-color：設置輪廓的顏色（屬性值與邊框顏色屬性值相同）
• outline-style：設置輪廓的樣式（屬性值與邊框樣式屬性值相同）
• outline-width：設置輪廓的寬度（屬性值與邊框寬度屬性值相同）

outline: outline-color outline-style outline-width

5. 外邊距與內邊距

CSS margin (外邊距) 屬性定義元素周圍的空間

CSS padding (填充) 屬性定義元素邊框與元素內容之間的空間

5-1 外邊距

margin 設置元素的外邊距（盒子與其它盒子之間的距離）

• margin 沒有背景顏色，是完全透明的
• margin 會在元素邊框外設置外邊距推開其它元素，不會改變元素自身的寬度和高度

margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性

為了縮短代碼，有可能使用一個屬性中 margin 指定的所有外邊距屬性

margin: margin-top margin-right margin-bottom margin-left; /* 按照順時針順序 top -> right -> bottom -> left */

• margin-top：設置元素的上外邊距
• margin-right：設置元素的右外邊距
• margin-bottom：設置元素的下外邊距
• margin-left：設置元素的左外邊距

四個值部分缺省，有如下三種情況：

1 個值，其他 3 個值都由這個值（上外邊距）復制得到

p {margin: 1px;} /* 等價于 1px 1px 1px 1px */

2 個值，第 3 個值（下外邊距）由第 1 個值（上外邊距）復制得到，第 4 個值（左外邊距）由第 2 個值（右外邊距）復制得到

h2 {margin: 0.5em 1em;} /* 等價于 0.5em 1em 0.5em 1em */

3 個值，第 4 個值（左外邊距）由第 2 個值（右外邊距）復制得到

h1 {margin: 0.25em 1em 0.5em;} /* 等價于 0.25em 1em 0.5em 1em */

歸納起來就是，上下對應，左右對應，第一個值是 top

值描述

auto	瀏覽器計算外邊距
length	規定以具體單位計的外邊距值，比如像素、厘米等。默認值是 0px
%	規定基于父元素的寬度的百分比的外邊距
inherit	規定應該從父元素繼承外邊距

5-2 內邊距

padding 定義元素邊框與元素內容之間的空間，即上下左右的內邊距

• padding 設置內邊距后會增加元素自身的高度和寬度
• 元素的背景顏色會渲染填充 padding 設置的區域
• 塊級元素默認為橫占一行寬度為100%，當不給塊級元素設置寬度（默認寬度）然后再設置padding，此時塊級元素的寬度不會改變
• 塊級元素設置了寬度此時再設置padding就會撐大盒子

單獨使用 padding 屬性可以改變上下左右的填充

為了縮短代碼，有可能使用一個屬性中 padding 指定的所有內邊距屬性

padding: padding-top padding-right padding-bottom padding-left; /* 按照順時針順序 top -> right -> bottom -> left */

• padding-top：設置元素的上內邊距
• padding-right：設置元素的右內邊距
• padding-bottom：設置元素的下內邊距
• padding-left：設置元素的左內邊距

內邊距與外邊距一樣，遵循值復制的規則

• 如果缺少左外邊距的值，則使用右外邊距的值
• 如果缺少下外邊距的值，則使用上外邊距的值
• 如果缺少右外邊距的值，則使用上外邊距的值

值說明

length	定義一個固定的填充(像素, pt, em,等)
%	使用百分比值定義一個填充

5-3 清除內外邊距

不同的瀏覽器會有不用的默認的內外邊距 ，在布局前首先清除下網頁的內外邊距

將所有的元素內外間距都設為 0 來清除內外邊距

* {padding: 0;margin: 0; }

5-4 margin重疊

相鄰塊級元素垂直外邊距的合并

當上下相鄰的兩個塊級元素（兄弟元素）相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上邊距 margin-top，則它們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個值之中較大的，這種現象被稱為 margin重疊

垂直之間塌陷的原則是以兩盒子最大的外邊距為準

解決方案：

• 只給同級元素中的一個元素設置margin
• 給每一個元素添加父元素，然后觸發BFC規則（不推薦）

5-5 margin塌陷

嵌套塊級元素垂直外邊距的塌陷

對于兩個嵌套關系（父子元素）的塊級元素，父元素上有上邊距 margin-top 同時子元素也有上邊距 margin-top，此時父元素的上邊距 margin-top 會受子元素影響，當子元素的外邊距大于父元素的外邊距時，父元素就會塌陷較大值的外邊距，這種現象被稱為 margin塌陷

即無論給子元素設不設置margin-top值，其都不發生作用，都會作用于父元素身上

解決方案：

• 給父元素設置外邊框（border）或者內邊距（padding）(不建議)
• 觸發 BFC （BFC = OFDP overflow、float、display、position）
• 使用偽元素 ::before，::after

總結

以上是生活随笔為你收集整理的盒模型详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。