一、CSS與CSS盒模型

1. 什么是CSS？

CSS即層疊樣式表(全稱：Cascading Style Sheets)，是一種用來(lái)表現(xiàn)HTML樣式的計(jì)算機(jī)語(yǔ)言，它不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。 也許這個(gè)術(shù)語(yǔ)可能比較陌生，但是實(shí)際上我們已經(jīng)用過(guò)了。大部分容器的屬性style的值以及標(biāo)簽<style></style>里的內(nèi)容都只能是CSS。

2. 什么是CSS盒模型?

我們之前提過(guò)容器的概念，這里的盒子可理解為在瀏覽器上可見的塊狀容器。比如一個(gè)登錄模塊，新聞或人物摘要模塊，文章列表等。CSS給這些盒子定了一個(gè)盒子模型，包含了內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個(gè)要素，這個(gè)模型像極了一個(gè)快遞盒子。為了更好地說(shuō)明這個(gè)問(wèn)題，我真的弄了一個(gè)快遞盒子，折騰了兩小時(shí)，今天非得把這個(gè)問(wèn)題說(shuō)明白了，看圖！

盒子模型

這個(gè)快遞盒子已經(jīng)把盒子模型表達(dá)得很清楚了。

• padding: 是內(nèi)容與邊框之間的距離，圖上表現(xiàn)即表現(xiàn)為泡沫的厚度（忽略間隙，下同）。
• border: 邊框，圖上表現(xiàn)為紙箱。
• margin: 是一個(gè)容器的邊框與另一個(gè)容器邊框之間的距離，上圖表現(xiàn)為紙箱間距。
• content: 容器中的內(nèi)容，上圖表現(xiàn)為磚頭。

小明家裝修就差幾塊磚，剛好我家有點(diǎn)舊磚就給他寄過(guò)去，寄之前我按綠色箭頭的測(cè)量方法測(cè)量好了之后，把尺寸告訴給小明。過(guò)些天快件要到了。彼時(shí)小明已記不清我說(shuō)的尺寸，但又不好意思再問(wèn)我，于是讓派件小哥幫忙測(cè)量，派件小哥就把快件按紅色箭頭的測(cè)量方法測(cè)量好了之后，把尺寸告訴給小明。小明犯難了，這尺寸不對(duì)呀，這可如何是好。

其實(shí)不是尺寸出了問(wèn)題，而是我們度量尺寸之前沒有協(xié)商好以什么樣的方式去度量。box-sizing的作用就是把容器的度量方式給確定下來(lái)，這樣在說(shuō)明或計(jì)算一個(gè)容器的寬高的時(shí)候才不致于混亂。然而實(shí)際開發(fā)的過(guò)程中，這個(gè)樣式屬性用得很少，是因?yàn)橐话闱闆r下我們是按其默認(rèn)值 content-box的方式進(jìn)程度量的。

二、屬性解析

box-sizing: content-box|border-box|inherit