前言：前陣子在做一個(gè)項(xiàng)目時(shí)，在頁面布局方面遇到了一點(diǎn)小問題，于是上stackoverflow上求助。ifaou在幫助我解決我問題的同時(shí)，還推薦我閱讀一篇有關(guān)CSS盒子模型的文章《The CSS Box Model》，閱讀之后受益匪淺，才知道自己對(duì)盒子模型知識(shí)還是如此欠缺。恰逢學(xué)期末，項(xiàng)目驗(yàn)收后暫時(shí)告一段落，有空閑的時(shí)間。于是想把這篇文章翻譯出來，一方面再給自己一點(diǎn)挑戰(zhàn)和鍛煉，另一方面也給大家參考，讓更多的人受益。

　　這篇文章適合初級(jí)web設(shè)計(jì)朋友，讓你對(duì)盒子模型有更近一步的理解。但是在閱讀這篇文章之前你應(yīng)該對(duì)盒子模型html等基礎(chǔ)知識(shí)是有一定的了解，否則只會(huì)讓你更加云里霧里。這篇文章不會(huì)像很多的中文教程那樣，把盒子模型內(nèi)邊距，外邊距，如何定位等概念有條不紊的介紹一遍。這篇文章更多的是教你在實(shí)戰(zhàn)過程中如何自如的控制盒子的寬度，如何用最恰當(dāng)?shù)姆椒ǘㄎ缓凶樱绾谓鉀QIE中盒子的種種bug。

　　之所以翻譯這篇外國文章，是因?yàn)槲以趯W(xué)習(xí)的過程中也發(fā)現(xiàn)，國外的教程和過內(nèi)的相比，它們授人以漁，更授人以魚 。不同于國內(nèi)教程有章有節(jié)有點(diǎn)有條目，他們的敘述方式更接近談話式的由淺入深……總而言之，目的在于給更多的初學(xué)者提供一點(diǎn)啟示和幫助，不必像我一樣走了許多彎路。

　　這是我第一次翻譯，有欠缺的地方請(qǐng)大家指正。我盡量把它翻譯的通俗易懂，同時(shí)也加入了一些自己的語言自己的體會(huì)，和幫助理解的圖示(為了閱讀流暢，也就不另表示了)。附上原文地址http://reference.sitepoint.com/css/boxmodel

　　深入理解CSS盒子模型（The CSS Box Model）

　　如果你了解盒子模型(box model)的概念，了解它是如何決定某一個(gè)元素的最終尺寸的話，會(huì)有助你理解一個(gè)元素如何在網(wǎng)頁上定位的。盒子模型主要適用于塊級(jí)元素。順便提一個(gè)與此相關(guān)的概念：行內(nèi)布局模型(inline layout model)——定義了行內(nèi)元素是如何定位的,在行內(nèi)元素格式(InlineFormatting)中有具體說明

　　盒子的尺寸的計(jì)算(Calculating BoxDimensions)

　　在CSS2.1中，塊級(jí)元素只能是矩形形狀的。當(dāng)我們需要計(jì)算一個(gè)塊級(jí)元素的整體尺寸時(shí)，需要同時(shí)把內(nèi)容區(qū)域(content area)[注釋1]的長寬，連同此元素的外邊距，內(nèi)邊距，以及邊框都計(jì)算在內(nèi)

　　[注釋1]：此文章中頻繁提到content 和content area這兩個(gè)概念，雖然從字面上都可以理解為盒子中的內(nèi)容區(qū)域(content),但從后文的敘述來看，這兩個(gè)概念還是有區(qū)別的，到這篇文章發(fā)布為止，我還是對(duì)這兩者的區(qū)別有迷惑，希望有興趣閱讀原文的朋友能留言告訴我這兩者的區(qū)別，以便于我更正文中的錯(cuò)誤。

　　我們可以通過聲明寬和高來定義一個(gè)元素的內(nèi)容(content)的寬度和高度。如果沒有做任何的聲明，寬度和高度的默認(rèn)值將是自動(dòng)(auto)

　　w3schools上對(duì)于盒子模型的圖示如下：

　　在圖的下方有一段很重要的話Important: When you specifythe width and height properties of an element with CSS, you are just settingthe width and height of the content area.也就是說當(dāng)我們?cè)赾ss中設(shè)計(jì)一個(gè)塊級(jí)元素的width和height屬性時(shí)比如.box{width :100px; height:100px}時(shí)，其中的width 和height僅僅是對(duì)content部分設(shè)置的，即定義上圖中padding下虛線方框內(nèi)區(qū)域的長和寬。而不是內(nèi)容，內(nèi)邊距，邊框的總和(但在IE的早期版本包括IE6中，盒子模型的width和height卻恰恰是這樣定義的，盡管符合人們思考的邏輯，但是不符合規(guī)范，這會(huì)造成嚴(yán)重的問題)

　　對(duì)寬度為自動(dòng)狀態(tài)的靜態(tài)(static)定位元素(即無定位)，和相對(duì)定位(relatively positioned)元素來說，計(jì)算寬度的方法是，將他們包含塊(containing block)[注釋2]的寬度減去此元素的橫向的所有外邊距，內(nèi)邊距，邊框，滾動(dòng)條。也就是說，從包含塊的寬度中除去元素的橫向外邊距，內(nèi)邊距，邊框，滾動(dòng)條（如果存在的話）的寬度，所剩的值就是了。

　　[注釋2]：包含塊(containing block)。如果你知道絕對(duì)定位和相對(duì)定位的實(shí)現(xiàn)原理的話，這個(gè)注釋可以忽略。包含塊可以理解為一個(gè)矩形,而這個(gè)矩形的作用是為它里面包含的元素提供一個(gè)參考,內(nèi)部元素的尺寸和位置的計(jì)算往往是由該元素所在的包含塊決定的。例如在絕對(duì)定位中，距離它最近的已定位(position為fixed,relative或absolute)的祖先元素即為包含塊。這算比較初級(jí)的概念，不深究，請(qǐng)百度。

　　包含塊的定位屬性和尺寸被作為后代元素定位和尺寸計(jì)算的參考。盡管元素的定位必須遵從與他們的塊級(jí)元素來進(jìn)行定位，但是他們也非受限于它。后代的元素也可以溢出包含塊。在大多數(shù)情況下， generated boxes[注釋3]通常扮演著子代元素包含塊的角色。想要充分了解包含塊的大量細(xì)節(jié)信息請(qǐng)點(diǎn)擊ContainingBlock

　　[注釋3] ：不知道generated boxes應(yīng)該如何翻譯，有知道的朋友請(qǐng)告知，謝謝

　　對(duì)于浮動(dòng)(floated)和絕對(duì)定位(absolutelypositioned)元素(包括固定定位(fixed)元素)來說, 自動(dòng)狀態(tài)的寬度會(huì)使generated box收縮到緊貼它內(nèi)容大小。

　　我覺得我在這里有必要總結(jié)一下前兩段話的意思，前兩段話都是在說在寬度缺省的情況下(auto),盒子模型自動(dòng)設(shè)置寬度的兩種方式。

　　我們知道，當(dāng)我們放置一個(gè)塊級(jí)元素于頁面上時(shí)，并且不設(shè)置它的定位屬性(relative,absolute,fixed),即position:static,或者設(shè)置了position:relative的情況下，塊的寬度是延伸自動(dòng)填充滿它的父元素的寬度區(qū)域。

　　舉個(gè)例子：

.box1
{ 
    background:black;
    color:White;
    height:100px;
    padding:10px;
    border:20px solid Red;
    margin:30px;
}        

        

        
        
      
        
it知識(shí)庫：【原創(chuàng)翻譯】深入理解CSS盒子模型，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。