在html頁面中，所有可見的html標(biāo)簽元素都是由margin、padding、border 和內(nèi)容組成的，專業(yè)術(shù)語稱盒子模型或框模型，后面統(tǒng)稱為盒子模型。
如下圖示例：
盒子模型
按F12鍵打開開發(fā)者工具，使用選擇元素工具（箭頭圖標(biāo)），隨便選擇一個(gè)html元素，在下方styles 面板上就會看到上圖的盒模型。
在了解盒子模型前，讓我們先學(xué)習(xí)邊距、填充、和邊框。
當(dāng)html元素沒有任何內(nèi)容或?qū)捀邽?時(shí)，設(shè)置邊距、邊框、填充就沒有任何意義了，所以這些都是建立在有內(nèi)容的元素基礎(chǔ)上的。
邊距、填充、和邊框
因?yàn)槊恳粋€(gè)html元素都是一個(gè)盒子，它有上下左右四個(gè)面，所以邊距、填充、邊框屬性需要設(shè)置四個(gè)方向的值，可以簡寫也可以分開使用，語法如下：
簡寫語法：
margin: 10px 15px 20px 12pxpadding: 10px 15px 20px 12pxborder: 1px solid #ff0000
效果如下：
margin和padding在簡寫時(shí)是按照上、右、下、左的順時(shí)針方向設(shè)置值的，這4個(gè)值不是必須都要設(shè)置的，你可以設(shè)置一個(gè)、2個(gè)、3個(gè)，但至少要一個(gè)值。
如果設(shè)置一個(gè)值時(shí)，其它方向都使用相同的值，如：
margin:10px;padding:10px;
效果如下：
如果設(shè)置2個(gè)值時(shí),如：
margin:10px 15px;padding:10px 15px;
效果如下：
如上可以看到，下、左邊距都是10px，下、左填充都是15px，缺省的方向會以使用反方向的值，同理當(dāng)設(shè)置3個(gè)屬性值時(shí)一樣，缺省的那個(gè)會默認(rèn)使用反方向的值。
拆分寫法：
/*邊距*/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;
分開寫法和簡寫的效果是一樣的，這里注意邊距、填充只有一個(gè)屬性值，而邊框有三個(gè)屬性值：邊框大小、邊框樣式、邊框顏色，所以邊框更加復(fù)雜點(diǎn)，邊框還可以按照不同屬性單獨(dú)設(shè)置。
1、css 邊距 —— margin
邊距（margin）是指從邊框邊界向外的距離，為元素周圍創(chuàng)建空間，它是透明的，如下箭頭所示。
邊距的重疊現(xiàn)象，當(dāng)相鄰的html元素都有邊距時(shí)，會出現(xiàn)邊距重疊而不是相加的效果，如下示例：
可以看到，盒子1的下邊距和盒子2的上邊距重疊了，它們的上下間距是10px，而不是20px。如果盒子1和盒子2的邊距值不一樣時(shí)也會重疊，只不過它們的間距會以其中最大的那個(gè)值顯示，如下：
2個(gè)盒子上下間距實(shí)際以盒子2的邊距顯示，因?yàn)楹凶?邊距大于盒子1的邊距。
2、css 填充 —— padding
填充就是從邊框邊界向內(nèi)到元素內(nèi)容邊界的距離，如下綠色區(qū)域箭頭示例：
3、css 邊框 —— border
邊框border，不同于margin、padding，它是可見的默認(rèn)是有顏色的，如下示例：
盒子1邊框寬度1px，盒子2邊框?qū)挾?0px，都是紅色邊框，其盒模型圖如下：
當(dāng)border為0時(shí)，不顯示邊框。
之前介紹了邊框的簡寫方法，是按照方向分別設(shè)置邊框?qū)挾取邮?、顏色?/p>
border-top: 1px solid #ff0000;border-right: 1px solid #ff0000;border-bottom: 1px solid #ff0000;border-left: 1px solid #ff0000;
因?yàn)檫吙蛴腥齻€(gè)屬性值：寬度、樣式、顏色，所以還可以按照不同屬性值設(shè)置，如下：
border-color:red;border-style:solid;border-width:10px;
當(dāng)按照屬性值的維度設(shè)置的時(shí)候，同樣可以繼續(xù)按照方向拆分設(shè)置，如下：
設(shè)置邊框?qū)挾龋?/p>
四個(gè)方向都是一樣的邊框?qū)挾龋?/p>
border-width:10px;
分別設(shè)置每個(gè)方向的寬度：
border-top-width:10px;border-right-width:15px;border-bottom-width:12px;border-left-width:5px;
如下顯示效果：
設(shè)置邊框樣式
樣式分別有 dotted（虛線） 、solid（實(shí)線） 、double（雙線） 、dashed（虛線）4個(gè)樣式，如下：
四個(gè)方向都是一樣的邊框樣式：
border-style: solid;
分別設(shè)置每個(gè)方向邊框樣式：
border-top-style:solid;border-right-style:dotted;border-bottom-style:double;border-left-style:dashed;
如下效果：
當(dāng)邊框?qū)挾葹?時(shí)，設(shè)置邊框樣式或顏色是無效的。
設(shè)置邊框顏色
四個(gè)方向都是一樣的顏色：
border-color: red;
分別設(shè)置每個(gè)方向的顏色：
border-top-color:red;border-right-color:blue;border-bottom-color:green;border-left-color:orang;
顯示效果：
當(dāng)邊框?qū)挾葹?時(shí)，設(shè)置邊框樣式或顏色是無效的。
盒子的實(shí)際大小
一個(gè)html元素在頁面中顯示的實(shí)際寬高并一定等于它的width和height屬性設(shè)置的值。
標(biāo)準(zhǔn)盒模型
標(biāo)準(zhǔn)盒模型的width/height 不包含padding和border
如下圖：
盒子1的實(shí)際顯示尺寸等于height + border + padding之和，如圖中盒子1占據(jù)的空間：高度126 = 100 + 20 + 6，寬度 136 = 100 + 30 + 6。
非標(biāo)準(zhǔn)盒模型
比如在之前Ie瀏覽器中，width/height 包含了padding和border。
這里使用box-sizing: border-box模擬非標(biāo)準(zhǔn)盒模型。
如下圖：
可以看到，padding 和 border 被包含到寬度和高度里了。
如果想要改變盒子的計(jì)算方式可以使用 CSS Box Sizing 。
當(dāng)box-sizing: border-box，是非標(biāo)準(zhǔn)盒模型。
當(dāng)box-sizing: content-box（瀏覽器默認(rèn)），為標(biāo)準(zhǔn)盒模型。
總結(jié)
1、盒子模型的概念，由邊距、邊框、填充和元素內(nèi)容組成。
2、邊距、填充和邊框的語法使用，簡寫、拆分使用、按方向或?qū)傩灾稻S度單獨(dú)使用。
3、html元素實(shí)際顯示寬度和高度計(jì)算方法。
4、標(biāo)準(zhǔn)盒模型和非標(biāo)準(zhǔn)盒模型的區(qū)別。
總而言之，css盒子模型是學(xué)習(xí)css的基礎(chǔ)知識，后面一切都是建立在盒子模型之上的，所以要完全理解它，感謝關(guān)注，祝學(xué)習(xí)愉快。
上一篇：前端入門——css 選擇器
