CSS基礎：塊級元素與盒模型

簡介

　　在 HTML4.01 中，元素一般能夠分爲塊級元素( "Block-level element" ) 和內聯元素 ( "Inline-level element" ) 兩大類。塊級元素單獨佔一行顯示，內部能夠包含內聯元素或其餘塊級元素；內聯元素不換行，內部只能包含其餘內聯元素，在這篇文章中將只討論塊級元素。

(注：在 HTML5 中並無塊級元素和內聯元素的概念，而是經過內容模型( "Content model" )規定了每一個元素的分類( "Content categories" )和容許包含的內容( "Permitted content" )，例如：<a> 標籤在 HTML4.01 中是內聯元素，理論上不能嵌套諸如 <div> 之類的塊級元素，可是在 HTML5 中判斷是否合法要稍微複雜一點： <a> 標籤的分類可能屬於流元素( "Flow content" )或短語元素( "Phrasing content" )，交互元素( "Interactive content" )，可觸元素( "palpable content" )中的一種或多種，具體狀況要根據上下文而定，容許包含的內容是 "transparent"，意爲透明的，也就是說既能夠包含 "Flow content" 又能夠包含 "Phrasing content" ，根據父元素決定，若是單獨像 "a > div" 這樣嵌套，因爲 <div> 標籤的分類屬於 "Flow content"，所以這裏是合法的，若是像 "p > ins > a > div" 這樣嵌套，"a > div" 是否合法要看 "ins > div" 是否合法，因爲 <ins> 容許包含的內容也是 "transparent"，因此再看 "p > div" 是否合法，因爲 <p> 容許包含的內容只能是 "Phrasing content"，因此總的來講這裏是不合法的)

 

　　還須要注意的是：塊級元素和 CSS 中 { display: block; } 的元素不是一個概念，例如，<li> 元素默認的 display 值爲 list-item，<table> 元素默認的 display 值爲 table ，可是它們都是塊級元素，具備塊級元素的基本特徵，在同一個水平流上只能顯示一個元素。

 

　　塊級元素老是被表示爲一個矩形的盒子，稱爲 "盒模型"，由 "外邊距+邊框+內邊距+盒子自己寬高" 組成，如圖所示：

"盒子自己寬高" 規定的部分稱爲內容區域 "Content box"，在 CSS 中設置的 "width" 和 "height" 就是做用於這個區域；

"盒子自己寬高+內邊距" 規定的部分稱爲內邊距區域 "Padding box"，在 CSS 中設置的 "background" 就是做用於這個區域；

"盒子自己寬高+內邊距+邊框" 規定的部分稱爲邊框區域 "Border box"；

"盒子自己寬高+內邊距+邊框+外邊距" 規定的部分稱爲外邊距區域 "Margin box"；

利用 CSS3 的 "border-sizing" 屬性能夠更改 "width" 和 "height" 的做用區域，理論上講有以下四種狀況：

{ box-sizing: content-box; }    /* 默認 */

{ box-sizing: padding-box; }    /* 火狐曾經支持 */

{ box-sizing: border-box; }    /* 所有支持 */

{ box-sizing: margin-box; }    /* 不支持 */

"border-sizing" 屬性被全部現代瀏覽器支持，IE 家族只有 IE8 以上才支持，而且須要添加各個瀏覽器的私有前綴。

 

塊級元素的水平格式化

　　具體表現爲：正常流中的塊級元素其水平部分的總和等於父容器的寬度，也就是說：左外邊距+左邊框+左內邊距+寬度+右內邊距+右邊框+右外邊距 = 父容器的寬度。這條規則主要涉及到 "margin"，"padding"，"border"，"width" 四個屬性，其中 "margin" 和 "padding" 的默認值均爲0，"border" 的默認值爲 "none"，"width" 的默認值爲 "auto"，意爲補齊，而且只有 "width"，"margin" 的值能夠設置爲 "auto"，它們又有如下幾種特殊狀況：(僅討論水平方向上，"margin" 僅表明 "margin-left" 和 "margin-right")

"width" 和 "margin" 均固定：這種狀況又稱爲格式化屬性過度受限( "overconstrained" )，此時瀏覽器總會將 "margin-right" 強制爲 "auto" 以撐滿父容器；
"width" 值固定，"margin-left" 或 "margin-righ" 只有一側值固定：瀏覽器表現爲將另外一側 "margin" 的值強制爲 "auto" 以撐滿父容器；
"width" 值爲 "auto"，兩側 "margin" 值固定：瀏覽器表現爲 "width" 撐滿父容器除 "margin" 外的剩餘寬度；
"width" 值固定，兩側 "margin" 值爲 "auto"：瀏覽器表現爲 "margin-right" 和 "margin-left" 平分剩餘寬度以撐滿父容器，借用這種方法可使塊級元素水平居中；
"width" 和 "margin" 均爲 "auto"：瀏覽器表現爲 "width" 撐滿父容器，"margin" 爲0，而且只要 "width" 設置爲 "auto"，不管是 "margin-left" 仍是 "margin-right" 被設置爲 "auto"，它們最後都會變成0；

根據這一準則，以及創造者背後的意圖，咱們應該少設置盒子的寬度，避免其丟失流動性。

 

塊級元素的垂直格式化

　　具體表現爲：塊級元素的高度會盡量小，直到能夠包裹其中的內容，或者也能夠理解爲塊級元素的高度由它的內容撐開。在垂直方向上，不但 "height" 的表現與 "width" 有區別，垂直方向的 "margin" 設置爲 "auto" 時與水平方向的 "margin" 也不一樣，它將自動計算爲0，另外垂直方向的 "margin" 會發生合併現象：
相鄰兄弟元素之間上者的 "margin-bottom" 和下者的 "margin-top" 合併，能夠經過觸發 BFC 或在中間插入一個內聯元素阻斷，防止合併發生；
父容器和它的第一個子元素的 "margin-top" 合併，能夠經過觸發 BFC 或在中間插入一個內聯元素阻斷，防止合併發生，另外也能夠設置父容器的 "border" 或 "padding" 進行阻斷，由於它們能夠將二者的 "margin" 分開，而子元素的就不行；
父容器和它的最後一個子元素的 "margin-bottom" 合併，避免方法同上；
合併的規則是："正正取最大"，"負負取最小"，"正負則相加"。

一樣，根據這一準則，咱們應該少設置盒子的高度，也是避免其丟失流動性。總的來講就是：頁面元素的寬度由外到內自適應，高度由內到外撐開。

 

關於 width 和 height

　　上面已經說了，儘可能避免將 "width" 和 "height" 的值設置爲固定，除此以外，還有一種流動性更好的替代方案，即 "min-width"，"max-width" 和 "min-height"，"max-height"，而且這四個屬性的兼容性很是好，兼容 IE8 以上以及全部現代瀏覽器，須要注意的是，它們和 "width"，"height" 之間有一套獨立的覆蓋規則，與常規的 CSS 優先級無關：
即便 "width" 設置了 "!important" ，若是它超過了最大寬度，依然會被後者覆蓋，或者說截斷；
當 "max-width" 和 "min-width" 衝突時，"min-width" 的權重更大，與優先級無關；

示例：

.test {
    width: 100px !important;
    max-width: 50px; /* 最終結果爲50px */
}

 

.test {
    width: 100px !important;
    min-width: 70px; /* 最終結果爲70px */
    max-width: 50px;
}

 

關於 padding

　　關於 "padding" 要說的只有兩點：一是 "padding" 不能設置爲負值，二是不管是水平仍是垂直方向，"padding" 的百分比值都是基於父容器的寬度計算的。

示例：

<!-- html -->
<div class="father">
    <div class="son"></div>
</div>

 

/* css */
.father {
    width: 200px;height: 100px;
    background: red;
}
.son {
    width: 50px;height: 50px;
    padding: 25%;  /* 最終結果爲50px */
    background: green;
}

 

關於 border

　　"border-color" 有一個很重要的特性，其默認值是 "transparent"，可是當設置了 "color" 後，其計算結果爲 "color" 設置的顏色，擁有相似特性的屬性還有 "outline"，"box-shadow"，"text-shadow" 等。

示例：

.test {
    border: solid 1px;  /* 邊框顏色爲紅色 */
    color: red;
}

 

關於 margin

　　和 "padding" 屬性同樣，"margin" 的百分比值也是基於父容器的寬度計算的，可是 "margin" 的值卻能夠設置爲負值，而且 "-margin" 有着至關大的做用：一是處於文檔流中的元素，當 "margin-top" 和 "margin-left" 設置爲負值時，元素向着對應方向移動；當 "margin-bottom" 和 "margin-right" 設置爲負值時，元素自己不動，而是將後面的元素拉過來，這時文檔流中堆疊順序老是遵循默認的後來者居上的原則，也就是說後面的元素會覆蓋前面的元素。二是處於文檔流中的元素，若是先設置了 "position：relative" 和 "z-index" 改變堆疊順序，那麼覆蓋規則由 "z-index" 的大小決定。三是使用 "position：absolute" 脫離文檔流的元素，當 "margin-top" 和 "margin-left" 設置爲負值時，元素向着對應方向移動；當 "margin-bottom" 和 "margin-right" 設置爲負值時，元素自己不動，對後面的元素也沒有影響。四是使用 "float" 脫離文檔流的元素，若是負 "margin" 的方向與浮動方向相同，那麼元素向着對應方向移動；相反，那麼元素自己不動，而是將前面或者後面的元素拉過來。五是當元素的 "width" 爲 "auto" 時，負 "margin" 能夠增大元素的寬度，使其超出父容器的寬度。