html頁面中，所有可見的html標簽元素都是由margin、padding、border 和內容組成的，專業術語稱盒子模型或框模型，后面統稱為盒子模型。

如下圖示例：

按F12鍵打開開發者工具，使用選擇元素工具（箭頭圖標），隨便選擇一個html元素，在下方styles 面板上就會看到上圖的盒模型。

在了解盒子模型前，讓我們先學習邊距、填充、和邊框。

當html元素沒有任何內容或寬高為0時，設置邊距、邊框、填充就沒有任何意義了，所以這些都是建立在有內容的元素基礎上的。

邊距、填充、和邊框

因為每一個html元素都是一個盒子，它有上下左右四個面，所以邊距、填充、邊框屬性需要設置四個方向的值，可以簡寫也可以分開使用，語法如下：

簡寫語法：

margin: 10px 15px 20px 12px
padding: 10px 15px 20px 12px
border: 1px solid #ff0000

效果如下：

margin和padding在簡寫時是按照上、右、下、左的順時針方向設置值的，這4個值不是必須都要設置的，你可以設置一個、2個、3個，但至少要一個值。

如果設置一個值時，其它方向都使用相同的值，如：

margin:10px;
padding:10px;

效果如下：

如果設置2個值時,如：

margin:10px 15px;
padding:10px 15px;

效果如下：

如上可以看到，下、左邊距都是10px，下、左填充都是15px，缺省的方向會以使用反方向的值，同理當設置3個屬性值時一樣，缺省的那個會默認使用反方向的值。

拆分寫法：

/*邊距*/
margin-top: 10px;
margin-right:15px;
margin-bottom:20px;
maring-left:12px;
/*填充*/
padding-top: 10px;
padding-right:15px;
padding-bottom:20px;
padding-left:12px;
/*邊框*/
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;

分開寫法和簡寫的效果是一樣的，這里注意邊距、填充只有一個屬性值，而邊框有三個屬性值：邊框大小、邊框樣式、邊框顏色，所以邊框更加復雜點，邊框還可以按照不同屬性單獨設置。

1、css 邊距 —— margin

邊距（margin）是指從邊框邊界向外的距離，為元素周圍創建空間，它是透明的，如下箭頭所示。

邊距的重疊現象，當相鄰的html元素都有邊距時，會出現邊距重疊而不是相加的效果，如下示例：

可以看到，盒子1的下邊距和盒子2的上邊距重疊了，它們的上下間距是10px，而不是20px。如果盒子1和盒子2的邊距值不一樣時也會重疊，只不過它們的間距會以其中最大的那個值顯示，如下：

2個盒子上下間距實際以盒子2的邊距顯示，因為盒子2邊距大于盒子1的邊距。

2、css 填充 —— padding

填充就是從邊框邊界向內到元素內容邊界的距離，如下綠色區域箭頭示例：

3、css 邊框 —— border

邊框border，不同于margin、padding，它是可見的默認是有顏色的，如下示例：

盒子1邊框寬度1px，盒子2邊框寬度10px，都是紅色邊框，其盒模型圖如下：

當border為0時，不顯示邊框。

之前介紹了邊框的簡寫方法，是按照方向分別設置邊框寬度、樣式、顏色：

border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;

因為邊框有三個屬性值：寬度、樣式、顏色，所以還可以按照不同屬性值設置，如下：

border-color:red;
border-style:solid;
border-width:10px;

當按照屬性值的維度設置的時候，同樣可以繼續按照方向拆分設置，如下：

設置邊框寬度：

四個方向都是一樣的邊框寬度：

border-width:10px;

分別設置每個方向的寬度：

border-top-width:10px;
border-right-width:15px;
border-bottom-width:12px;
border-left-width:5px;

如下顯示效果：

設置邊框樣式

樣式分別有 dotted（虛線） 、solid（實線） 、double（雙線） 、dashed（虛線）4個樣式，如下：

四個方向都是一樣的邊框樣式：

border-style: solid;

分別設置每個方向邊框樣式：

border-top-style:solid;
border-right-style:dotted;
border-bottom-style:double;
border-left-style:dashed;

如下效果：

當邊框寬度為0時，設置邊框樣式或顏色是無效的。

設置邊框顏色

四個方向都是一樣的顏色：

border-color: red;

分別設置每個方向的顏色：

border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:orang;

顯示效果：

當邊框寬度為0時，設置邊框樣式或顏色是無效的。

盒子的實際大小

一個html元素在頁面中顯示的實際寬高并一定等于它的width和height屬性設置的值。

標準盒模型

標準盒模型的width/height 不包含padding和border

如下圖：

盒子1的實際顯示尺寸等于height + border + padding之和，如圖中盒子1占據的空間：高度126 = 100 + 20 + 6，寬度 136 = 100 + 30 + 6。

非標準盒模型

比如在之前Ie瀏覽器中，width/height 包含了padding和border。

這里使用box-sizing: border-box模擬非標準盒模型。

如下圖：

可以看到，padding 和 border 被包含到寬度和高度里了。

如果想要改變盒子的計算方式可以使用 CSS Box Sizing 。

當box-sizing: border-box，是非標準盒模型。

當box-sizing: content-box（瀏覽器默認），為標準盒模型。

總結

1、盒子模型的概念，由邊距、邊框、填充和元素內容組成。

2、邊距、填充和邊框的語法使用，簡寫、拆分使用、按方向或屬性值維度單獨使用。

3、html元素實際顯示寬度和高度計算方法。

4、標準盒模型和非標準盒模型的區別。

總而言之，css盒子模型是學習css的基礎知識，后面一切都是建立在盒子模型之上的，所以要完全理解它，感謝關注，祝學習愉快。

上一篇：前端入門——css 選擇器

兩篇文章我們把「Web前端開發進階篇」CSS樣式講解完了，接著我們來講解下一篇文章，關于CSS框模型的內容知識，小伙伴們跟上我的節奏，動起來，Let's go！

【引言】

CSS框模型（也就是常說的盒子模型）就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。css中的框模型是css的基礎，框模型的理解可以幫助我們很好的掌握頁面中的布局，進行對樣式進行修改。話不多說，那就開始吧。

CSS 框模型概述

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。

從上圖看出，元素框最內部分的是實際的內容，其次往外圍的是內邊距（padding），內邊距呈現了元素的背景，內邊距的邊緣是邊框（border），默認是透明的邊框，不會遮擋任何元素，最外面的是外邊距（margin）。

提示：背景應用于內容的內邊距、邊框組成的區域。

內邊距、邊框和外邊距默認都是為0，但是有些瀏覽器它們有自己默認的外邊距和內邊距，可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。例如，用通用選擇器對所有元素進行設置。

* {margin: 0;padding: 0;}

在CSS中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，請看下圖：

CSS就可以這樣寫：

#box {
 width: 70px;
 margin: 10px;
 padding: 5px;
}

提示：內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。

提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

瀏覽器兼容性

一旦為頁面設置了恰當的 DTD（文檔類型定義），大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。

【在CSS中，我們把padding和margin統稱為內邊距和外邊距，邊框（border）內的是內邊距，邊框外的就是外邊距，好記吧。哈哈】

CSS內邊距（padding）

元素的內邊距在邊框和內容區之間。CSSpadding 屬性定義元素邊框與元素之間的空白區域。padding屬性接受長度值或百分比值，但不允許負值，例如，給div元素的各邊添加10px的內邊距，你只需要這樣寫：

#box
{padding: 10px;}

你也可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位，例如：

#box{padding: 10px 20em 2ex 20%;}

單邊內邊距屬性

可以通過下面四個屬性，分別設置各邊的內邊距：

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

例如：

#box {
 padding-top: 10px;
 padding-right: 0.25em;
 padding-bottom: 2ex;
 padding-left: 20%;
 }

CSS邊框

邊框在CSS是最常用的屬性，可以用它創建出效果出色的邊框，并且可以應用于任何元素。也就是我們常用的border，元素的邊框就是圍繞元素內容和內邊距的一條或多條線。

每個邊框有 3 個方面：寬度、樣式，以及顏色。

1、邊框的樣式

上節課我們講解了CSS輪廓（outline-style），但是由于瀏覽器兼容性，用的較少，我們可以用邊框定義多個樣式，例如：

.p1 {border-style: solid;}
.p2 {border-style: dotted}
.p3 {border-style: dashed}
.p4 {border-style: solid}
.p5 {border-style: double}
.p6 {border-style: groove}
.p7 {border-style: ridge}
.p8 {border-style: inset}
.p9 {border-style: outset}

效果：

定義單邊樣式，例如：

.p1 {
				border-top-style: solid;
				border-right-style: dotted;
				border-bottom-style: double;
				border-left-style: groove
			}

效果：

2、邊框的寬度

可以通過 border-width 屬性為邊框指定寬度。為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值） 和 thick。

注釋：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶代理可能把 thin 、medium 和 thick 分別設置為等于 5px、3px 和 2px，而另一個用戶代理則分別設置為 3px、2px 和 1px。

所以，我們可以這樣設置邊框的寬度：

p {border-style: solid; border-width: 5px;}

或者：

p {
 	border-style: solid; 
 	border-width: thick;
}

定義單邊寬度

可以按照 top-right-bottom-left 的順序設置元素的各邊邊框：

p {
 	border-style: solid; 
 	border-width: 15px 5px 15px 5px;
}

也可以通過下列屬性分別設置邊框各邊的寬度：

p {
 	border-style: solid;
 	border-top-width: 15px;
 	border-right-width: 5px;
 	border-bottom-width: 15px;
 	border-left-width: 5px;
 }

沒有邊框

由于 border-style 的默認值是 none，如果沒有聲明樣式，就相當于 border-style: none。因此，如果想要邊框出現，就必須聲明一個邊框樣式。僅有寬度，顏色是不起任何作用的。

3、邊框的顏色

使用一個簡單的 border-color 屬性，它一次可以接受最多 4 個顏色值。也是上、右、下、左。可以用十六進制或RGB來表示顏色，單邊邊框顏色與單邊樣式和單邊寬度屬性相同。例如：

.p1 {
				border-top-color: red;
				border-right-color: blue;
				border-bottom-color: royalblue;
				border-left-color: hotpink;
			}

透明邊框：如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望創建一個不可見的邊框。你就可以這樣：

border-color: transparent;

CSS 外邊距

圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素外創建額外的“空白”。

設置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位、百分數值甚至負值。

與內邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的：

h1 {margin : 10px 0px 15px 5px;}

值復制：

在前兩節中提到過值復制。下面我們為您講解如何使用值復制。

有時，我們會輸入一些重復的值：

p {margin: 0.5em 1em 0.5em 1em;}

通過值復制，您可以不必重復地鍵入這對數字。上面的規則與下面的規則是等價的：

p {margin: 0.5em 1em;}

這兩個值可以取代前面 4 個值。這是如何做到的呢？CSS 定義了一些規則，允許為外邊距指定少于 4 個值。規則如下：

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

下圖提供了更直觀的方法來了解這一點：

換句話說，如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）復制得到。如果給定了兩個值，第 4 個值會從第 2 個值復制得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）復制得到。最后一個情況，如果只給定一個值，那么其他 3 個外邊距都由這個值（上外邊距）復制得到。

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

這種辦法有一個小缺點，您最后肯定會遇到這個問題。假設希望把 p 元素的上外邊距和左外邊距設置為 20 像素，下外邊距和右外邊距設置為 30 像素。在這種情況下，必須寫作：

p {margin: 20px 30px 30px 20px;}

單邊外邊距屬性

單邊外邊距屬性跟單邊邊框顏色與單邊樣式和單邊寬度屬性相同，都是從四個方向設置單邊外邊距值。

h2 {
 margin-top: 20px;
 margin-right: 30px;
 margin-bottom: 30px;
 margin-left: 20px;
 }

提示：

Netscape 和 IE 對 body 標簽定義的默認邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內部填充（padding）的默認值定義為 8px，因此如果希望對整個網站的邊緣部分進行調整，并將之正確顯示于 Opera 中，那么必須對 body 的 padding 進行自定義。

外邊距合并

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。

合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

也很簡單，看張圖就明白了：

當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。請看下圖：

盡管看上去有些奇怪，但是外邊距甚至可以與自身發生合并。

假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并：

如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：

這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。

CSS框模型今天就講解到這里了，下一篇講解CSS定位，希望大家不要放棄學習哦！

PS：

本文為‘Web前端進階指南’原創，手動碼字不易，小伙伴們別忘了順手點個贊加個關注哈，有什么不懂的下方留言評論或私信。謝謝大家哈！