一、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
| 值 | 說明 |
|---|---|
| content-box | 這是CSS2.1指定的寬度和高度的行為。指定元素的寬度和高度(最小/最大屬性)適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外 |
| border-box | 指定寬度和高度(最小/最大屬性)確定元素邊框box。也就是說,對元素指定寬度和高度包括padding和border的指定。內(nèi)容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計算 |
| inherit | 指定box-sizing屬性的值,應(yīng)該從父元素繼承 |