盒模型

1. 盒模型

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

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

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

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

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

1-1 塊級盒子和內聯(lián)盒子

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

display: block; /* 塊級盒子 */ display: inline; /* 內聯(lián)盒子 */

塊級盒子

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

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

內聯(lián)盒子

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

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

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	設置元素的最小寬度

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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	規(guī)定應該從父元素繼承邊框寬度。

3-2 邊框樣式

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

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

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

3-3 邊框顏色

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

值說明

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

顏色是通過CSS最經(jīng)常的指定：

• 顏色的名稱
• 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	規(guī)定以具體單位計的外邊距值，比如像素、厘米等。默認值是 0px
%	規(guī)定基于父元素的寬度的百分比的外邊距
inherit	規(guī)定應該從父元素繼承外邊距

5-2 內邊距

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

• padding 設置內邊距后會增加元素自身的高度和寬度
• 元素的背景顏色會渲染填充 padding 設置的區(qū)域
• 塊級元素默認為橫占一行寬度為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：設置元素的左內邊距

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

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

值說明

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

5-3 清除內外邊距

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

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

* {padding: 0;margin: 0; }

5-4 margin重疊

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

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

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

解決方案：

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

5-5 margin塌陷

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

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

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

解決方案：

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

總結

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

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