转HTML+CSS总结/深入理解CSS盒子模型
原文地址：http://www.chinaz.com/design/2010/1229/151993.shtml
?
前言：前陣子在做一個項目時，在頁面布局方面遇到了一點小問題，于是上stackoverflow上求助。ifaou在幫助我解決我問題的同時，還推薦我閱讀一篇有關CSS盒子模型的文章《The CSS Box Model》，閱讀之后受益匪淺，才知道自己對盒子模型知識還是如此欠缺。恰逢學期末，項目驗收后暫時告一段落，有空閑的時間。于是想把這篇文章翻譯出來，一方面再給自己一點挑戰和鍛煉，另一方面也給大家參考，讓更多的人受益。
這篇文章適合初級web設計朋友，讓你對盒子模型有更近一步的理解。但是在閱讀這篇文章之前你應該對盒子模型html等基礎知識是有一定的了解，否 則只會讓你更加云里霧里。這篇文章不會像很多的中文教程那樣，把盒子模型內邊距，外邊距，如何定位等概念有條不紊的介紹一遍。這篇文章更多的是教你在實戰 過程中如何自如的控制盒子的寬度，如何用最恰當的方法定位盒子，如何解決IE中盒子的種種bug。
之所以翻譯這篇外國文章，是因為我在學習的過程中也發現，國外的教程和過內的相比，它們授人以漁，更授人以魚 。不同于國內教程有章有節有點有條目，他們的敘述方式更接近談話式的由淺入深……總而言之，目的在于給更多的初學者提供一點啟示和幫助，不必像我一樣走了 許多彎路。
這是我第一次翻譯，有欠缺的地方請大家指正。我盡量把它翻譯的通俗易懂，同時也加入了一些自己的語言自己的體會，和幫助理解的圖示（為了閱讀流暢，也就不另表示了）。附上原文地址：http://reference.sitepoint.com/css/boxmodel
深入理解CSS盒子模型（The CSS Box Model）
如果你了解盒子模型（box model）的概念，了解它是如何決定某一個元素的最終尺寸的話，會有助你理解一個元素如何在網頁上定位的。盒子模型主要適用于塊級元素。順便提一個與此 相關的概念：行內布局模型（inline layout model）——定義了行內元素是如何定位的，在行內元素格式（InlineFormatting）中有具體說明
盒子的尺寸的計算（Calculating BoxDimensions）
在CSS2.1中，塊級元素只能是矩形形狀的。當我們需要計算一個塊級元素的整體尺寸時，需要同時把內容區域（content area）［注釋1］的長寬，連同此元素的外邊距，內邊距，以及邊框都計算在內
［注釋1］：此文章中頻繁提到content 和content area這兩個概念，雖然從字面上都可以理解為盒子中的內容區域（content），但從后文的敘述來看，這兩個概念還是有區別的，到這篇文章發布為止， 我還是對這兩者的區別有迷惑，希望有興趣閱讀原文的朋友能留言告訴我這兩者的區別，以便于我更正文中的錯誤。
我們可以通過聲明寬和高來定義一個元素的內容（content）的寬度和高度。如果沒有做任何的聲明，寬度和高度的默認值將是自動（auto）
w3schools上對于盒子模型的圖示如下
在圖的下方有一段很重要的話Important： When you specifythe width and height properties of an element with CSS， you are just settingthe width and height of the content area.也就是說當我們在css中設計一個塊級元素的width和height屬性時比如.box{width ：100px; height:100px}時，其中的width 和height僅僅是對content部分設置的，即定義上圖中padding下虛線方框內區域的長和寬。而不是內容，內邊距，邊框的總和（但在IE的早 期版本包括IE6中，盒子模型的width和height卻恰恰是這樣定義的，盡管符合人們思考的邏輯，但是不符合規范，這會造成嚴重的問題）
對寬度為自動狀態的靜態（static）定位元素（即無定位），和相對定位（relatively positioned）元素來說，計算寬度的方法是，將他們包含塊（containing block）［注釋2］的寬度減去此元素的橫向的所有外邊距，內邊距，邊框，滾動條。也就是說，從包含塊的寬度中除去元素的橫向外邊距，內邊距，邊框，滾動條（如果存在的話）的寬度，所剩的值就是了。
［注釋2］：包含塊（containing block）。如果你知道絕對定位和相對定位的實現原理的話，這個注釋可以忽略。包含塊可以理解為一個矩形，而這個矩形的作用是為它里面包含的元素提供一 個參考，內部元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。例如在絕對定位中，距離它最近的已定位（position為 fixed，relative或absolute）的祖先元素即為包含塊。這算比較初級的概念，不深究，請百度。
包含塊的定位屬性和尺寸被作為后代元素定位和尺寸計算的參考。盡管元素的定位必須遵從與他們的塊級元素來進行定位，但是他們也非受限于它。后代的元 素也可以溢出包含塊。在大多數情況下， generated boxes［注釋3］通常扮演著子代元素包含塊的角色。想要充分了解包含塊的大量細節信息請點擊ContainingBlock
［注釋3］ ：不知道generated boxes應該如何翻譯，有知道的朋友請告知，謝謝
對于浮動（floated）和絕對定位（absolutelypositioned）元素（包括固定定位（fixed）元素）來說， 自動狀態的寬度會使generated box收縮到緊貼它內容大小。
我覺得我在這里有必要總結一下前兩段話的意思，前兩段話都是在說在寬度缺省的情況下（auto），盒子模型自動設置寬度的兩種方式。
我們知道，當我們放置一個塊級元素于頁面上時，并且不設置它的定位屬性（relative，absolute，fixed），即position:static，或者設置了position:relative的情況下，塊的寬度是延伸自動填充滿它的父元素的寬度區域
舉個例子：
?
| 以下為引用的內容： .box1 { background:black; color:White; height:100px; padding:10px; border:20px solid Red; margin:30px; } |
?
?
Html代碼：
?
| 以下為引用的內容： <h2>Static or Relative Box</h2> <div class="box1">For floated or absolutely positioned </div> |
結果為：
?
即塊的寬度是延伸自動填充滿它的父元素的寬度區域。
所以當我們在計算一個被包裹中的元素的寬度時，我們只需要用父元素減去這個元素的外邊距，邊框，內邊距，和scrollbar，剩下就是它的寬度，因為它會自動填充。雖然這個基本上沒有實際應用可言……
但是浮動floated元素和絕對定位元素，他們的結果卻恰恰相反，他們會收縮以致包裹緊貼內容，同樣舉個例子
以下為引用的內容：
.box2{background:black;color:White;height:100px;padding:10px;border:20px solid Red;margin:30px;position:absolute; }?
這里同樣沒有設置寬度，但是進行了絕對定位，html代碼：
?
| 以下為引用的內容： <h2>Absolute or Float</h2>??? <div class="box2">For floated or absolutely positioned </div> |
結果：
?
浮動元素和寬度
之前，在CSS2中，沒有聲明寬度的浮動元素，不會收縮并于緊貼（shrink to wrap）住他們的內容，恰恰相反的是，他們會不斷的延伸至與他們父元素最大寬度相當。這種行為在CSS2.1中被收縮緊貼代替了。但是無論如何，在IE6和更早的瀏覽器版本中，一個沒有聲明寬度的浮動元素還是會收縮緊貼住它的內容作為一種默認的設置，除非子元素有自己的布局（has a layout）［注釋3］，比如說在這種情況下，父元素會伸展來適應父元素中的可用內容的寬度
［注釋3］：”IE的表現與其它瀏覽器不同的原因之一是，顯示引擎使用了一個稱為布局的內部概念……windows上的IE使用布局概念來控制元素 的尺寸和定位。那些“擁有布局”的元素負責本身及其子元素的尺寸設置和定位。如果一個元素“沒有擁有布局”，那么它的尺寸和位置由最近的擁有布局的祖先元 素控制……布局是許多IE顯示bug的根源”——摘自Andy Budd、Simon Collision、Cameron Moll的《CSS Mastery Advanced WebStandards Solutions（Second Edition）》（精通CSS 高級Web標準解決方案 第二版）
正如以上所說，對于沒有聲明寬度的浮動元素，在IE6和之前的版本都是采取收縮緊貼內容的行為，所以這種說法無從考證了，我也在IETest下測試過，的確如此
同樣應該被注意的是，當一個浮動元素（沒有聲明寬度）包含一個向右浮動的子元素時，它同樣也會自動的延伸填充，以適應父元素的可用內容的寬度。這種 情況在之前的IE瀏覽器，包括IE7中都是存在的（之前的Firefox，包括2.0版本中也存在這個bug，但是這個問題在Firefox3.0 Alpha 6版本中已經得到了解決）。
我也為以上這段話寫了個例子給大家：
?
| 以下為引用的內容： <div class="parent">?????? <div class="containing-block">?? </div> |
對照一面那段話：首先是一個浮動元素containing-block，包含一個向右浮動的子元素box，父元素為parent……
| 以下為引用的內容： .box { background:black; color:White; height:100px; padding:10px; border:20px solid Red; margin:30px; float:right; } .containing-block { background:blue; height:250px; float:right; } .parent { background:gray; height:300px; width:500px; } |
在Firefox中運行結果為：
??
但是在IETester中用IE5.5運行的效果是：
所以，為了避免上面提及的bug，如果可能的話，盡量為一個浮動元素指定一個具體的寬度值，總是會比較安全一點的。無論如何，只要你總是有留意到以上提及的問題，你或許會發現無寬度的浮動在一些場合下還是非常管用的，比如橫向流式（fluid-width）布局菜單
無論內容區域如何定位，如果高度，最小高度（min-height），最大高度（max-height等沒有被聲明的話，內容區域高度與內容的高度是相等的［注釋4］。
［注釋4］：這里就是讓我對content area和content產生疑惑的地方，不知道有沒有朋友能幫我看看，幫我解釋一下
所以，當你為了弄清把一個元素放在頁面上究竟需要多大尺寸時，把已經聲明內邊距，邊框，外邊距值統統與內容區域加上。當然，如果一個元素沒有內邊距，邊框，外邊距的話，也就是它的尺寸僅僅是由它的內容來決定
如果一個元素僅僅包含浮動或者絕對定位的元素，它沒有一丁點的內容，那么它的高度將為0。我們將在Floating and Clearing做更多討論
實現盒子模型
說明盒子模型的最好方式是用一個簡短的例子。我們用計算來看看在頁面上放置一個元素總到底需要多大的尺寸（這里先忽略外邊距的疊加效果——以下會有更詳細有關這個的說明）：
Total width = left margin + left border + left padding + width + right padding + right border + right margin
Total height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
?
這里是我們的CSS樣例——為了一個類名為’box’的元素聲明盒子的各個屬性：
?
| 以下為引用的內容： .box { width： 300px; height： 200px; padding： 10px; border： 1px solid #000; margin： 15px; } |
以上的元素總共被計算出來的的尺寸是：
Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
以上的計算在圖1中給出了具體描述，這是從Firebug元素布局展示中截下的圖，
在圖1中，我們可以很清晰的看到內容區域處于中央，圍繞著內容區域的內邊距區域，邊框區域，外邊距區域。內容區域的外邊緣稱為內容邊緣 （content edge），或者是內邊緣（inner edge）;內邊距區域的外邊緣被稱為外邊距邊緣（padding edge）;邊框區域的外邊緣被稱為邊框邊緣（border edge）;外邊距區域的外邊緣被稱為——你應該可以猜到了——外邊距邊緣（margin edge）或外邊緣（outer edge）
你可以從這個簡短的例子中看到，為了使這個元素適應這個頁面，我們需要一個至少352px 寬度和252px高度的區域。如果可用的區域小于這個，這個元素會錯位，或者溢出它的包含塊。注意到IE6或者更早的瀏覽器版本中，在這種情況下會伸展包含塊的以容納內容區域的多余高度，這很明顯會擾亂網頁的布局。但其它版本的瀏覽器會使元素溢出它的邊界，同時忽略內容。
這個Bug翻譯過來是：“如果元素的內容比元素本身大，那么我們希望內容溢出到元素外。但是，在IE6和更低版本中，擁有布局的元素會錯誤的拓展以 便適應內容的尺寸……這種錯誤意味著Window上的IE中的width實際上更像是min-width”——Andy Budd、Simon Collision、Cameron Moll的《CSS Mastery Advanced Web Standards Solutions（Second Edition）》（精通CSS 高級Web標準解決方案第二版），給大家演示一下，很簡單的：
?
| 以下為引用的內容： <div class="IEbug">?? </div> |
?
| .IEbug { background:yellow; width:100px; height:100px; } |
火狐下測試結果：
IE6下測試結果：
留意外邊距疊加效應
盡管在上面的計算元素所需區域大小的例子中外邊距已經在計算中包括在內了，但是需要注意的是縱向的無定位（static）元素的相鄰外邊距會疊加合 成為其中一個較大寬度的外外邊距的值，并非兩者之和。這就意味當計算實際上需要存放一個元素的區域大小時，并不是從外邊距的邊緣開始算起，只有最寬的外邊 距會生效，并且較窄的外邊距會與較大的疊加在一起，請閱讀CollapsingMargins來了解更多有關這相當復雜的一個主題。
實際盒子模型應用
非常值得注意的一點是，當一個元素的寬度被設置為100%時（也就是說父元素的內容寬度是100%），它不應該有任何的外邊距，內邊距，或者是邊 框，這只會使它放置的區域需要更大的面積。這通常會被設計師們所忽略忽略并且很嚴重的擾亂了頁面的布局，這樣的話內容要么溢出要么使元素比他們應該的樣式 更寬
以下為引用的內容：<div class="contain"><div class="box"></div> </div>?
沒有margin和padding，僅有width情況下的CSS：
?
| 以下為引用的內容： .box { background:black; width:100%; height:100px; } .contain { background:yellow; height:120px; width:200px; } |
效果如圖所示：
可見在沒有margin和padding的情況下，100%的內容能恰到好處的填充父元素
一旦加入了margin和padding（margin:10px;padding:10px;）之后效果如圖：
在firebug中的布局圖：
而加入了margin和padding之后，元素出現了錯位，并且只能顯示左側的margin
解決辦法是，在大多數情況下，避免給寬屬性添加具體的值（絕不是自動），并且只應用外邊距，內邊距，邊框。無定位元素的寬度將會默認為自動。甚至就算定義了內邊距，邊框，外邊距，它仍然會認為可用的內容寬度為全滿狀態。
當然，這種方法對某些例子可能失效，比如當元素不是無定位元素時，并且它的確需要一個指定的寬度（就像那個浮動元素不會自動填充它父元素的例子一樣）。在這些情況下，你有兩個選擇。
如果可用區域是固定寬度的，你能簡單的把每一個屬性元素（margin，padding等）的寬度都相加起來以匹配可用的那個固定寬度。舉個例子， 如果可用的區域寬度是500px，并且你需要一個元素有20px的內邊距，簡單的把這個元素的寬度設置為460px，內邊距為 20px（20+460+20=500）。這個辦法中先決條件是寬度值和元素盒子屬性使用的都是同一測量單位，因為你不希望把混合單位相加起來 （200px + 10%，只是舉個例子而已，在內容中這樣的寫法是沒有意義的）。
當可用內容區域的寬度是未知的時候——比如在流式布局（fluid layout）中——這個方法是行不通的，因為百分比（percentages）和像素（pixels）不能一起相加。在這種情況下，解決方法應該是為需要的元素聲明一個100%的寬度值，并且把內邊距，邊框，外邊距的值都設置到一個嵌套其中的元素中去。這個嵌套元素沒有任何的寬度值聲明，并且可以在沒有干擾父元素的情況下展示需要的內邊距，邊框，外邊距。［注釋5］
［注釋5］呃，其實這段話我也沒有理解……
現在你應該能清晰的理解CSS盒子模型了
后記：由于本人水平有限，可能很多地方翻譯的并不是很通俗。只希望能起一個拋磚引玉的作用，有更多的朋友來完善它，指出我翻譯和理解不正確的地方。如果時間允許的話，我繼續翻譯與此相關的一些列文章（即本文中的鏈接）。
最后向大家推薦Andy Budd、Simon Collision、Cameron Moll寫的《CSS Mastery Advanced Web Standards Solutions（Second Edition）》（精通CSS 高級Web標準解決方案第二版），翻譯這篇文章時參考了其中不少內容，這也是一本適合CSS進階類圖書，不適合初學者。希望有興趣的朋友可以參考一下。（來源：Color&Cool）
?
?我理解的CSS盒子模型：
css盒子模型模型是css技術運用的一種模式，更好地理解css盒子模型有助于我們高效率地布局并且有助于我們解決一些瀏覽器的兼容問題。
css盒子模型包括的屬性有：內容（content）、填充（padding）、邊界（margin）、邊框（border）。要注意的是我們在對元素定義寬高時是針對元素的內容定義的。（但在ie6寬高的定義是包含了padding、margin和border的）
轉載于:https://www.cnblogs.com/Remix/p/4773913.html
總結
以上是生活随笔為你收集整理的转HTML+CSS总结/深入理解CSS盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从getmemery()函数看内存管理、
- 下一篇： mysql可视化界面创建表_使用可视化界