前面兩章講到了CSS的一些基礎用法，這一章主要聚集于CSS的框結(jié)構和布局等。

基本框

CSS認為每一個元素都會生成一個或多個矩形框，這些被稱為元素框。實際上，框不一定要是矩形的，不過就現(xiàn)在來講，框都是矩形的。將框想像為矩形，也更加方便大家對框結(jié)構進行理解。

每一個元素框都具有外邊距、框和內(nèi)邊距。元素內(nèi)容的背景會應用到內(nèi)邊距，但是不會應用到外邊距。外邊距一般是透明的，透過外邊距可以看到父元素的背景。內(nèi)邊距不能為負值，外邊距可以。

如果元素未設置邊框顏色，則邊框顏色默認取元素的前景顏色。如果邊框樣式有某種縫隙，那么透過這些縫隙應該是可以看到元素的背景的。

塊級元素

一般的，一個元素的width被定義為從左內(nèi)邊界到右內(nèi)邊界的距離，height則是從上內(nèi)邊距到下內(nèi)邊界的距離。在大多情況下，文檔的高度和寬度都是由瀏覽器自動確定的。

框模型

水平格式化

width影響的是元素內(nèi)容區(qū)的寬度，而非整個可見的元素框。如元素<p style="width: 200px; border: 1px solid #ccc; padding: 0 5px; margin: 0 5px">，其width為200px，但是在默認的盒模型下，該元素的實際寬度為200px + 1px * 2 + 5px * 2 + 5px * 2 = 222px。在CSS3中，引入了box-sizing屬性來控制盒模型。為了盡量簡化理解，我們這里都默認使用的box-sizing為content-box，或者假裝暫時不知道box-sizing屬性。

水平屬性

水平屬性的七大基本屬性是：margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。這七個屬性中，只有margin-left、width和margin-right可以設置為auto，其余屬性必須要設定為特定的值。

大家要記住一點，元素框的寬度（之和）應該等為父元素的width。因此，如果以上三個可以設置為auto的屬性中有一個被設置為auto時，該屬性的值由其余兩個被指定的屬性以及父元素的width來決定。那么，如果用戶“強迫癥”式地為三個屬性都指定了值，但是其指定值不能滿足子元素框與父元素width之間的關系（過度受限），會發(fā)生什么呢？這種情況下，在從左往右的閱讀模式中，margin-right會被自動設置為auto；從右往左閱讀模式時情況則正好相反。

在不止一個auto的情況下，需要進行分類討論：

• 如果兩個邊距都設置為auto，則它們會被設置為相等的值，而最終達到的效果則是元素會相對于父元素進行水平居中顯示。大家要注意這與text-align的區(qū)別：text-align是對元素內(nèi)部的內(nèi)容進行居中，而自動左右外邊距則是會將元素進行居中。
  

  text-align和margin居中效果對比

• 如果width和外邊距之一被設置為auto， 余下的另一個外邊距被設置為指定值，則設置為auto的外邊距會被自動設置為0。

• 如果三個屬性都被設置為auto，則左右外邊距都會被設置為0，width保持為auto，最終會使元素的內(nèi)容區(qū)盡可能得寬。這種情況是默認情況，即用戶不顯式地設置這三個值時，瀏覽器會默認進行這樣的處理。

負外邊距

如果我們?yōu)樵卦O置了負外邊距，那么會是怎樣的顯示效果呢？

舉個例子：

div {width: 400px; border: 3px solid black}

p.wide {margin-left: 10px; width: auto; margin-right: -50px; background: #eee}

這樣會得到什么效果？

負邊距效果

答案是：沒有。

為什么呢？因為此時元素的width的值為440px，大家可以計算一下，上述原則在這樣的情況下是否成立。

正是由于這種情況，具有負邊距的元素有時會與父元素之外的元素發(fā)生重疊。

在元素發(fā)生過度受限的情況時，大家記住，受傷的永遠都是右邊距（從左向右閱讀模式）。即當元素過度受限，導致父子元素寬度關系得不到滿足時，右邊距會被強制設置為使等式成立的值，而不會管此時右邊距的值為正還是負。

內(nèi)邊距、邊框和內(nèi)容的寬度（和高度）是絕對不能為負的，唯一可以被設置為負值的只有外邊距。

如果以百分數(shù)來設置這些屬性，其表現(xiàn)方式與以具體單位設置時是一樣的。只是要記住一點，百分數(shù)的基數(shù)是包含元素的width。同時需要注意的是：邊框的寬度不能是百分數(shù)，而只能是長度。所以，想通過百分數(shù)來完全指定一個元素的尺寸，是不可能的。

對于替換元素，我們在非替換元素介紹的所有規(guī)則都適合。只有一點不同，當設置替換元素的width為auto時，該元素的寬度是其實際內(nèi)容的寬度。如果一個替換元素的width被設置為一個不等于其原始寬度的值，則其height值會等比例縮放，除非用戶顯式地指定了一個height值。

順便補充一點，在使用jQuery時，可以用不同的方法獲得元素的不同寬度。

<script type="text/javascript">
    $("selector").width();  //返回元素的寬度；不包括padding/border/margin
    $("selector").innerWidth();  //返回元素的寬度 + padding
    $("selector").outerWidth();  //返回元素的寬度 + padding + border
    $("selector").outerWidth(true);  //返回元素寬度 + padding + border + margin
</script>

垂直格式化

一個元素的默認高度由其內(nèi)容決定。同時，與width一樣，height定義的是元素內(nèi)容區(qū)的高度（默認盒模型的情況下），而非元素框的總高度。

與寬度屬性不一樣，如果正常流中的一個塊元素的margin-top和margin-bottom被設置為auto，它會自動被設置為0，這也說明我們不能通過將margin-top和margin-bottom設置為auto來達到垂直居中的效果。

如果一個塊級正常流元素的height被設置為一個百分數(shù)，這個值則是其包含塊height值的一個而百分數(shù)。如果沒有顯式地聲明包含塊的height，百分數(shù)高度會被重置為auto。

如果塊級正常流元素的高度設置為auto，而且只有塊級子元素，那么它的默認高度將是從最高塊級子元素的外邊框邊界到最低塊級子元素的外邊框邊界之間的距離。所以，子元素的外邊距會超出包含該元素的父元素的邊框。不過，如果塊級元素有上內(nèi)邊距或下內(nèi)邊距，或者有上邊框或下邊框，則其高度值是從其最高子元素的上外邊距到其最低子元素的下外邊距之間的距離。這是為什么呢？

合并垂直外邊距

垂直格式化的另一個重要特性就是垂直相鄰外邊距會發(fā)生合并，且這種合并只會發(fā)生在外邊距。如果元素有內(nèi)邊距和邊框，則它們不會發(fā)生合并。這也就解釋了為什么在不設置包含元素的邊框和內(nèi)邊距的情況下，子元素的外邊距會超出包含該元素的父元素的邊框。

負外邊距會影響垂直格式化，而且會影響到外邊距如何合并。如果垂直外邊距都設置為負值，那么瀏覽器會取兩個外邊距絕對值的最大值的相反數(shù)；如果一個正外邊距和一個負外邊距合并，會從正外邊距減去這個負外邊距的絕對值。

由于負邊距的存在，可能會造成元素之間的重疊。發(fā)生重疊的元素要怎么顯示呢？由于瀏覽器總會按從前到后的順序顯示元素，所以文檔中后出現(xiàn)的正常流元素可能會覆蓋較早出現(xiàn)的元素。

列表項

大家在使用列表時需要注意，與一個列表元素關聯(lián)的標志可能在列表項內(nèi)容之外，也可能處理為內(nèi)容開始處的一個內(nèi)聯(lián)標志，這取決于屬性list-style-position的值。

“l(fā)ist-style-position”樣式效果

行內(nèi)元素

在開始進一步的介紹之前，我們先回顧一些基本概念。

em框

em框在字體中定義，也稱為字符框。實際的字形有可能比em框更高或更矮。

內(nèi)容區(qū)

內(nèi)容區(qū)可以是元素中各字符的em框串在一起構成的框，也可以是由元素中字符字形描述的框。

行間距

行間距是font-size和line-height之差。

行內(nèi)框

行內(nèi)框等于內(nèi)容框加行間距所構成的框。對于非替換元素，元素行內(nèi)框的高度剛好等于line-height的值。對于替換元素，元素行內(nèi)框的高度則恰好等于內(nèi)容區(qū)的高度，因為行間距不能應用于替換元素。

行框

包含一行中出現(xiàn)的行內(nèi)框的最高點和最低點的最小框。各行行框的頂端緊挨著上一行行框的底端。

下面我們再了解一組有用的行為和概念：

1. 內(nèi)容區(qū)類似于一個塊級元素的內(nèi)容框。

2. 行內(nèi)元素的背景應用于內(nèi)容區(qū)及所有的內(nèi)邊距。

3. 行內(nèi)元素的邊框要包圍內(nèi)容區(qū)及所有的內(nèi)邊距和邊框。

4. 非替換元素的內(nèi)邊距、邊框和外邊距對行內(nèi)元素或其生成的框沒有垂直效果。即，它們不會影響元素行內(nèi)框的高度。

5. 替換元素的外邊距和邊框會影響該元素行內(nèi)框的高度，相應地，也可以影響包含該行內(nèi)框的行框的高度。

行內(nèi)框在行中根據(jù)其vertical-align屬性垂直對齊。

行內(nèi)格式化

line-height實際只影響行內(nèi)元素和其他行內(nèi)內(nèi)容，而不會影響塊級元素，至少不會直接地影響到塊級元素。也可以為一個塊級元素設置line-height，但是這個值只是應用于塊級元素的內(nèi)聯(lián)內(nèi)容時才會影響到視覺效果。

可以為一個塊級元素設置line-height，并將這個值應用于塊中的所有內(nèi)容，而不論內(nèi)容是否包含在行內(nèi)元素中。實際上，我們可以認為塊級元素中包含的各文本行本身都是行內(nèi)元素，而不論是否真正用行內(nèi)元素的標記包圍起來。也就是說，在塊級元素上設置line-height，實際會應用于其包含的行內(nèi)元素。

垂直對齊

對于行內(nèi)元素的垂直對齊，我們使用vertical-align樣式來控制。vertical-align的各關鍵字的含義如下：

top

將元素行內(nèi)框的頂端與包含該行內(nèi)框的元素的行框的頂端對齊

bottom

將元素行內(nèi)框的底商與包含該行內(nèi)框的元素的行框的底端對齊

text-top

將元素行內(nèi)框的頂端與父元素內(nèi)容區(qū)的頂端對齊

text-bottom

將元素行內(nèi)框的底端與父元素內(nèi)容區(qū)的底端對齊

middle

將元素行內(nèi)框的垂直中點與父元素基線上0.5ex處的一點對齊

super

將元素的內(nèi)容區(qū)和行內(nèi)框上移。上移的距離因瀏覽器的不同而各不相同。

sub

將元素的內(nèi)容區(qū)和行內(nèi)框下移。下移的距離因瀏覽器的不同而各不相同。

vertical-align的百分數(shù)計算值是相對于元素的line-height來計算的。

管理行高

首先，大家需要記住一點：line-height相對于元素本身的font-size設置，而不是相對于父元素設置。在使用百分比或em等進行line-height的設置時，需要牢記這一點。

不知大家是否還記得，之前已經(jīng)提過，非替換元素的內(nèi)邊距、邊框和外邊距對行內(nèi)元素或其生成的框不會影響行框的高度，也就是說，如果為行內(nèi)元素設置了邊框，且邊框較寬，則容易導致不同行之間產(chǎn)生元素的覆蓋。這時就需要使用line-height來解決這個問題。

邊框效果

在設置line-height，并且想讓子元素繼承line-height的設置時，最好是設置一個原始數(shù)據(jù)。如line-height:1.5。這樣，在子元素繼承此值之后，也會基于此值來計算出相對于子元素的字體大小的正確行高。

行高設置效果

上例中我們只是將span的字體大小設置為28px，如果使用更大的值（如50px），你會發(fā)現(xiàn)在父元素的line-height設置為1.5em時，各行之間發(fā)生了重疊。而當line-height設置為1.5時，無論字體如何設置，由于子元素繼承的是縮放因子，而非計算值，所以總是能得到正確的行高。

行內(nèi)替換元素

一般認為行內(nèi)替換元素有固有的高度和寬度，有固有高度的替換元素可能導致行框比正常要高。這不會改變行中任何元素的line-height值，包括替換元素本身。它只是會讓行框的高度恰如能包含替換元素及其所有框?qū)傩?。換句話說，會用替換元素整體（內(nèi)容、外邊距、邊框和內(nèi)邊距）來定義元素的行內(nèi)框。

需要注意的是，不同于非替換元素，替換元素的邊距和邊框會影響行框的高度，因為它們要作為行內(nèi)替換元素的行內(nèi)框的一部分。

默認地，行內(nèi)替換元素位于基線上，在對行內(nèi)替換元素進行垂直布局的時候需要注意這一點。

改變元素顯示

我們可以使用display樣式來改變元素的角色。如將行內(nèi)元素顯示為塊元素。但是需要注意的是，我們使用display改變的只是元素的顯示角色，但是并不改變其本質(zhì)。也就是說，即便是使用display將行內(nèi)元素顯示為塊級元素，但是此行內(nèi)元素本質(zhì)上還是行內(nèi)元素，因上并不會改變一些約定人俗成的東西。如“行內(nèi)元素可能是一個塊元素的后代，但是反過來卻不行”。

這里，我們將inline-block單獨拿出來講一下。什么叫“inline-block”？即行內(nèi)塊元素。對于該元素的理解，可以將其理解為嵌在行中的替換元素。它的底端默認位于文本行的基線上。如果行內(nèi)塊元素的width未定義，或者顯式聲明為auto，則元素框會收縮以適應內(nèi)容。