一、CSS與CSS盒模型

1. 什么是CSS？

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

2. 什么是CSS盒模型?

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

盒子模型

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

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

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

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

二、屬性解析

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