深入理解CSS盒子模型

盒模型是css的基石之一，它指定元素如何顯示以及（在某種程度上）如何互動。頁面上每乙個元素都被看做乙個矩形框，框由元素的內容，內邊距 (padding)，邊框 (border)和外邊距 (margin)組成，如下圖所示。

內邊距出現在內容區域周圍，若給元素上新增背景，背景將會應用於由內容和內邊距組成的區域。新增邊框，會在內邊距的區域外加一條線，這些線有多種樣式，後面會有所介紹。在邊框外邊是外邊距，外邊距是透明的，一般使用它控制元素之間的間隔。

css2.1還包含outline屬性，繪製在元素框之上，不影響元素的大小或定位。大多數現代瀏覽器（包括ie8）都支援outline，但ie7和更低版本不支援。

內邊距、邊框、外邊距都是可選的，預設值為零。但許多元素將由使用者**樣式表設定外邊距和內邊距，所以將元素的margin和padding設定為零，對寫整個樣式有幫助，這項工作一般由全域性reset進行。

ie的早期版本，包括ie6，在混雜模式中使用自己的非標準盒模型。瀏覽器的width屬性不是內容的寬度，而是內容，內邊距和邊框的總和。新增的內邊距越多，給內容預留的空間就越少。

在css3中，可通過box-sizing屬性定義使用哪種盒模型，但除了一些非常特殊的場合很少使用該屬性。

目前最好的解決方案是迴避這個問題。也就是，不給元素新增指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到父元素或子元素。

box-sizing屬於css3內容，屬性值包括：content-box, border-box, inherit。該屬性用於更改預設的css盒模型寬度和高度的計算方式，可使用該屬性模擬不正確支援css盒模型規範的瀏覽器行為。

border-box

inherit。指定 box-sizing 屬性的值，應該從父元素繼承

瀏覽器支援：ie8及以上，chrome 10.0以上，firefox 29.0 以上，safari 5.1以上，opera 9.5以上。

示例：

div

margin屬性用於設定外邊距，下面我們將講述margin一些比較有意思的知識點

3.1 margin與容器尺寸

在標準盒模型中，border-box部分，即包括border,padding,content的方框代表可視尺寸（clientwidth）。外邊距加上可視尺寸則是「佔據尺寸」（張鑫旭大神自命名）。

在一些前提下，通過設定margin屬性可以改變可視尺寸和「佔據尺寸「的大小。

1. margin改變可視尺寸

適用範圍：

2. margin改變」佔據尺寸「

適用範圍：

3.2 margin與百分比單位

普通元素的百分比margin都是相對於容器（父級元素）的寬度計算。

絕對定位元素的百分比margin都是相對於第乙個定義祖先元素(relative/absolute/fixed)的計算寬度

在ie中，絕對定位元素的百分比margin是相對於第乙個定義祖先元素的寬度計算

3.3 margin重疊

margin重疊，即外邊距疊加，是乙個比較簡單的概念。但是，在實踐中對網頁進行布局時，它會造成很多混淆。簡單地說，當兩個或更多垂直外邊距相遇時，它們將形成乙個外邊距。這個外邊距的高度等於兩個發生重疊的外邊距的高度中的較大值。

1.3. 1 margin重疊特性

只有普通文件流中的塊框的垂直外邊距才會發生外邊距疊加（不包括float框和absolute框以及行內框）

不考慮writing-mode，只發生在垂直方向（margin-top/margin-bottom）

1.3.2 margin重疊的3種情境

margin重疊3種情境：

相鄰的兄弟元素

父級和第乙個/最後乙個子元素

margin-top重疊其他條件

margin-bottom重疊其他條件

乾掉margin-top重疊

在父元素加屬性，overflow：hidden;

父元素設定border-top/padding-top值

父元素與第乙個子元素之間插入inline元素，如空格

乾掉margin-bottom重疊

在父元素加屬性，overflow：hidden;

父元素設定border-bottom/padding-bottom值

設定height相關宣告（min-height以及height。max-height不起作用）

空的block元素（自己的上下外邊距疊加）

1.3.3 margin重疊計算規則

正正取大值

正負值相加

負負最負值

1.3.4 margin重疊的意義

連續段落或列表之類，如果沒有margin重疊，首尾項間距會和其他兄弟標籤1:2關係，排版不自然

web種任何地方巢狀或直接放入任何裸div，都不會影響原來的布局

遺落的空任意多個p元素，不會影響原來的閱讀排版

作用機制：自動填充元素佔據空間的剩餘空間，可利用其實現水平居中：

div

注意：margin實現居中，必須計算後的距離不能是負值。

margin 如何實現垂直布局？

改變流（但水品不再居中）

.father .son

2.絕對元素的margin:auto居中(ie8+)

.father .son

1.6 css margin失效情形

1.inline水平元素的垂直margin無效

前提：2.margin重疊

3.display:table-cell與margin

margin可應用於所有元素，除了diplay為table相關型別（不包括table-caption,table以及inline-table）的所有。甚至可應用於::first-letter

4.絕對定位元素非定位方向的margin值「無效」

絕對定位元素的margin值一直有效，但由於設定了絕對定位，脫離了文件流，所以看不出效果。

5.鞭長莫及導致margin無效，一些情況下，如浮動時，margin無效可能是不夠大。

6.內聯特性導致margin無效，例如對於，使用margin的負值定位，不會出現在容器之外。

1.7 了解margin-start/margin-end屬性

chrome/firefox目前支援該屬性，ie不支援

margin-start

margin-end

4.1 border-width 不支援百分比

盒子模型種，padding，margin都支援百分比，但是border，即邊框寬度不支援百分比；來自張鑫旭大神的理解：border-width不支援百分比是由於其語義限制，因為可以看到平板和手機兩個不同顯示大小的邊框大小並不根據元素長寬變化而變化。

4.2 了解各種border-style型別

4.3 border-color與color

border-color預設繼承自color，即未指定color時border-color與color一樣。類似的還有box-shadow,text-shadow,outline。

5.1 padding與容器尺寸

當width auto或者box-sizing為border-box，但是padding大小超過寬高時，padding會影響元素尺寸。

對於block元素：

對於內聯元素：

水平padding影響尺寸，垂直padding不影響尺寸。但會影響背景色。

5.2 padding負值與百分比值

padding不支援任何負值，padding的百分比相對於寬度計算。

inline元素的百分比值

空inline元素+padding高階也不等。是由於inline元素的垂直padding會讓"幽靈空白節點"顯現，也就是規範中的「strut」出現。這時通過設定font-size:0規避

span

5.3 標籤元素內建padding

button表單按鈕設定padding:0，chrome是ok的，但是在firefox中左右依然會有padding，通過設定屬性-moz-focus-inner規避;ie瀏覽器中，ie7文字越多左右padding逐漸變大，通過overflow屬性設定規避。

button::-moz-focus-inner button

對於button，padding與高度計算不相容，所以一般通過label標籤實現button,而button通過絕對定位到頁面之外或者z-index隱藏在頁面下方。

按鈕label

深入理解CSS盒子模型

深入理解CSS盒子模型

深入理解CSS中的盒子模型

CSS 理解盒子模型

深入理解CSS盒子模型

深入理解CSS盒子模型

深入理解CSS中的盒子模型

CSS 理解盒子模型

相關推薦