盒子模型（Box Model）是從CSS誕生之時(shí)便產(chǎn)生的一個(gè)概念，對(duì)網(wǎng)頁(yè)中的大部分對(duì)象，實(shí)際呈現(xiàn)形式就是一個(gè)盒子形狀對(duì)象（即塊狀對(duì)象），對(duì)于這個(gè)基礎(chǔ)又重要的概念，只要掌握盒子模型的尺寸及占位的標(biāo)準(zhǔn)技術(shù)方法，那就可以靈活駕馭盒子模型了！

CSS盒子模型

　　網(wǎng)頁(yè)設(shè)計(jì)中的每個(gè)元素都是長(zhǎng)方形的盒子。怎樣精確的計(jì)算盒子的尺寸？請(qǐng)看下面一幅圖：

　　盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。

　　如果你是一個(gè)Firebug的用戶，就會(huì)很熟悉下面的圖表了。這個(gè)圖表很好地展示了作用于頁(yè)面上任意盒子的數(shù)值。

　　注意到上面兩個(gè)例子中，margin都是白色的，margin 比較特別，它不會(huì)影響盒子本身的大小，但是它會(huì)影響和盒子有關(guān)的其他內(nèi)容，因此 margin 是盒模型的一個(gè)重要的組成部分。
　　盒子本身的大小是這樣計(jì)算的：

值為聲明的情況

　　如果未聲明 padding 或者 border，那他們或者值為零(使用 css reset 時(shí))，或者為瀏覽器的默認(rèn)值(很可能不是零，尤其是那些通常沒(méi)有重置的表單元素)。

　　如果未聲明盒子的width(而且這個(gè)盒子是一個(gè)塊級(jí)元素)，那么事情就變得有點(diǎn)怪異，我們先看這點(diǎn)，然后再看一下其他優(yōu)秀的關(guān)于盒子模型的資料。

塊級(jí)盒的默認(rèn)寬度

　　如果沒(méi)有聲明寬度，而且盒子是靜態(tài)或者相對(duì)定位，那么寬度將保持100%且padding和border將向內(nèi)推動(dòng)而不是向外擴(kuò)展。

　　如果明確的確定寬度為100%，那么padding就會(huì)向外擴(kuò)展。

　　從這個(gè)例子可以看出，盒子的默認(rèn)寬度并不是100%，也可能是其他值，應(yīng)該了解這種特別有價(jià)值的情況，因?yàn)樵诂F(xiàn)存的很多情況下，它對(duì)于設(shè)置/不設(shè)置寬度是很多幫助的。

　　我遇到的最大的麻煩就是 textarea(文本框) 元素了，它們需要設(shè)為寬度為所需的”cols”屬性，并且不能包含子元素。因此通常需要明確的設(shè)置 textarea 的寬度為 100%，但有 padding 時(shí)，就會(huì)延展 textarea 的寬度。固定寬度環(huán)境下，通?？梢栽O(shè)置為合適的像素值寬度，但是變寬情況就沒(méi)那么幸運(yùn)了。

無(wú)寬度的絕對(duì)定位盒子

　　未設(shè)定寬度的絕對(duì)定位的盒子的表現(xiàn)有點(diǎn)不一樣。它們的寬度只需要適合它們所包含的內(nèi)容即可。因此，如果盒中只有一個(gè)單詞，盒子就會(huì)像那個(gè)詞的表現(xiàn)一樣寬。如果變成兩個(gè)詞，盒子的寬度也會(huì)相應(yīng)增加。

　　這種情況會(huì)持續(xù)到盒子的寬度達(dá)到父元素寬度的 100%（最近的相對(duì)定位的父元素或者瀏覽器窗口），然后就會(huì)折行。
對(duì)盒子來(lái)說(shuō)，垂直擴(kuò)展以適應(yīng)包含的內(nèi)容是很自然的。值得奇怪的是，不僅僅是不同平臺(tái)下的文本表現(xiàn)不同，不同的瀏覽器處理這個(gè)問(wèn)題時(shí)，也有很多怪癖。

無(wú)寬度浮動(dòng)盒子
　　同無(wú)寬度的絕對(duì)定位盒子的表現(xiàn)一樣。盒子的寬度只需要擴(kuò)展到所包含內(nèi)容的寬度，直到其父元素的寬度（其父元素不必是相對(duì)定位的）。由于這些無(wú)寬度盒 子的脆弱性，我們要學(xué)到的是關(guān)鍵任務(wù)模式的時(shí)候它們是不能依賴的，像總體頁(yè)面布局中。如果浮動(dòng)一列作為側(cè)邊欄使用，并指望那些內(nèi)部元素（如圖片）來(lái)負(fù)責(zé)包 含它的寬度，你就是在自找麻煩。

內(nèi)聯(lián)元素也是盒子
　　我們這里一直把重點(diǎn)放在塊級(jí)元素的盒子上。很容易就可以把塊級(jí)元素想象為盒子，但是內(nèi)聯(lián)元素也是盒子?？梢园阉麄兿胂鬄榉浅ｉL(zhǎng)而窄的長(zhǎng)方形，它們也可以像其它盒子一樣有 margin, padding 和 border。

　　折行使它看起來(lái)有些不好理解。如上所示的左 margin 把盒子推向右邊，但是只在第一行有效，因?yàn)槟鞘呛凶拥钠瘘c(diǎn)。padding 正常的應(yīng)用在文本的上部或下部，當(dāng)折行時(shí)它會(huì)忽略上面行的 padding 并且以行高(line-height)要求的位置作為起點(diǎn)。透明背景是為了讓效果看起來(lái)更清楚。

親眼目睹一下

　　想看看組成頁(yè)面的每個(gè)單獨(dú)的“盒子”嗎？試著把這行代碼暫時(shí)放入樣式表：  

* { border: 1px solid red !important; }

• css