css css盒子模型又稱框模型 (box model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。
元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。
內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者**樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。
*css盒子模型有兩種，一種是符w3c標準的標準盒子模型，一種是ie怪異盒模型。
1、標準盒模型
所以標準盒模型一般設定的width和height值得是內容content的寬度和高度，增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
而如果想保持乙個盒子的真實占有寬度不變，那麼加width的時候就要減padding。加padding的時候就要減width。因為盒子變胖了是災難性的，這會把別的盒子擠下去，破壞原有的布局。
盒模型總寬度（元素總佔據空間）=content width + 左右margin值 + 左右border值+左右padding值
高度計算方法與寬度一樣。
2、ie盒模型
所以ie盒模型設定的width和height除了content區域外還包括相應方向的border、padding值，所以增加內邊距和邊框會影響width和height，也會增加元素框的總尺寸。所以設定width時要先計算內容區域還有border、padding值。
盒模型總寬度（元素總佔據空間）=width（上下border值 + 上下padding值 + content 寬度）
高度計算方法與寬度一樣。
為了使頁面在不同瀏覽器下呈現相同的效果，必須統一盒子模型，因為設定width或者height一般是必須用到的。
那麼必須設定瀏覽器的渲染模式是標準模式，在標準模式下，ie6+和其他現代瀏覽器會以w3c盒子模型渲染。（在怪異模式下，ie中只有ie9+會用w3c盒子模型。）
而要統一盒子模型，這時候就要用到box-sizing屬性了
box-sizing屬性一般用來指定盒子模型，它有三個值
content-box | border-box | inherit
在css當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。
兩個上下方向相鄰的元素框垂直相遇時，外邊距會合併，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值，而左右外邊距不產生合併。
注釋：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。
當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：
當乙個元素包含在另乙個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：
注釋：請注意，如果不設定外部 div 的內邊距和邊框，那麼內部 div 的上外邊距將與外部
div 的上外邊距合併（疊加）。
儘管看上去有些奇怪，但是外邊距甚至可以與自身發生合併。
假設有乙個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：
如果這個外邊距遇到另乙個元素的外邊距，它還會發生合併：
這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合併到一起，形成了乙個小的外邊距。
外邊距合併初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文字頁面為例。第乙個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一起，這樣各處的距離就一致了。
背景應用於由內容和內邊距、邊框組成的區域。
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css中盒子模型
css盒模型 簡介 就是用來裝頁面上的元素的矩形區域。css中的盒子模型包括ie盒子模型和標準的w3c盒子模型。box sizing 有3個值哦 content box border box inherit 標準盒子模型 ie盒子模型 標準盒子模型與ie盒子模型區別 標準的盒子模型 w3c 標準 盒...