摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數(shù)情況下，布局中結(jié)構(gòu)化元素乃至任何元素的高度是不必設(shè)定的。更新效果如圖以上措施使布局有了明顯改觀。

這是《CSS設(shè)計(jì)指南》的讀書筆記，用于加深學(xué)習(xí)效果。

display是 CSS 中最重要的用于控制布局的屬性。每個(gè)元素都有一個(gè)默認(rèn)的 display 值。對(duì)于大多數(shù)元素它們的默認(rèn)值通常是 block 或 inline 。一個(gè) block 元素通常被叫做塊級(jí)元素。一個(gè) inline 元素通常被叫做行內(nèi)元素。

div 是一個(gè)標(biāo)準(zhǔn)的塊級(jí)元素。一個(gè)塊級(jí)元素會(huì)新開始一行并且盡可能撐滿容器。其他常用的塊級(jí)元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

img 是一個(gè)標(biāo)準(zhǔn)的行內(nèi)元素。你可以把兩個(gè) 標(biāo)簽寫在兩行，但這并不影響圖片再瀏覽器中的顯示效果，它們會(huì)并列出現(xiàn)在一行上。而且標(biāo)簽直接的空白（標(biāo)記中的兩個(gè)標(biāo)簽雖然分別位于兩行，但這并不影響圖片在瀏覽器中顯示時(shí)的效果。圖片是行內(nèi)元素，所以它們顯示的時(shí)候就會(huì)并列出現(xiàn)在一行上。而且，標(biāo)簽之間的空白（包括制表、回車和空格）都會(huì)被瀏覽器忽略。

a 元素是最常用的行內(nèi)元素，它可以被用作鏈接。

另一個(gè)常用的 display 值是 none。一些特殊元素的默認(rèn) display 值是它，例如script。display:none 通常被 JavaScript 用來(lái)在不刪除元素的情況下隱藏或顯示元素。
把display設(shè)置為 none，該元素及所有包含在其中的元素，都不會(huì)在頁(yè)面中顯示。它們?cè)瓉?lái)占據(jù)的空間也會(huì)被回收。

相對(duì)的屬性是 visibility，這個(gè)屬性常用的值是 visible（默認(rèn)）和 hidden。把元素的 visibility 設(shè)定為 hidden，元素會(huì)隱藏，但它占據(jù)的空間仍然存在。

還有很多的更有意思的 display 值，幾乎所有HTML元素的display屬性值要么為block，要么為inline。最明顯的一個(gè)例外是table元素，它有自己特殊的display屬性值。這里有一份詳細(xì)的列表。

塊級(jí)元素（比如標(biāo)題和段落）會(huì)相互堆疊在一起沿頁(yè)面向下排列，每個(gè)元素分別占一行。而行內(nèi)元素（比如鏈接和圖片）則會(huì)相互并列，只有在空間不足以并列的情況下才會(huì)折到下一行顯示 。

塊級(jí)元素和行內(nèi)元素是可以互相轉(zhuǎn)化的：

/*默認(rèn)為塊級(jí)元素*/
p {display: inline;}
/*默認(rèn)為行內(nèi)元素*/
a {display: block;}

屬性了 display 屬性之后，我們來(lái)看下頁(yè)面布局：

多欄布局有三種基本的實(shí)現(xiàn)方案：固定寬度、流動(dòng)、 彈性。

固定寬度布局的大小不會(huì)隨用戶調(diào)整瀏覽器窗口大小而變化，一般是900到1100像素寬。其中960像素是最常見的，因?yàn)檫@個(gè)寬度適合所有現(xiàn)代顯示器，而且能夠被16、12、10、8、6、5、4和3整除，不僅容易計(jì)算等寬分欄的數(shù)量，而且計(jì)算結(jié)果也能得到?jīng)]有小數(shù)的像素?cái)?shù)。

流動(dòng)布局的大小會(huì)隨用戶調(diào)整瀏覽器窗口大小而變化。這種布局能夠更好地適應(yīng)大屏幕，但同時(shí)也意味著放棄對(duì)頁(yè)面某些方面的控制，比如隨著頁(yè)面寬度變化，文本行的長(zhǎng)度和頁(yè)面元素之間的位置關(guān)系都可能變化。Amazon.com的頁(yè)面采用的就是流動(dòng)中欄布局，在各欄寬度加大時(shí)通過為內(nèi)容元素周圍添加空白來(lái)保持內(nèi)容居中，而且現(xiàn)在的導(dǎo)航條會(huì)在布局變窄到某個(gè)寬度時(shí)收縮進(jìn)一個(gè)下拉菜單中，從而為內(nèi)容騰出空間。

彈性布局與流動(dòng)布局類似，在瀏覽器窗口變寬時(shí)，不僅布局變寬，而且所有內(nèi)容元素的大小也會(huì)變化，讓人產(chǎn)生一種所有東西都變大了的感覺。

多數(shù)情況下，布局中結(jié)構(gòu)化元素（乃至任何元素）的高度是不必設(shè)定的。事實(shí)上，我甚至想告訴你根本不應(yīng)該給元素設(shè)定高度。除非你確實(shí)需要這樣做，比如在頁(yè)面中創(chuàng)造一個(gè)絕對(duì)定位的元素。

為什么正常情況下都應(yīng)該保持元素height屬性的默認(rèn)值auto不變呢？很簡(jiǎn)單，只有這樣元素才能隨自己包含內(nèi)容的增加而在垂直方向上擴(kuò)展。這樣擴(kuò)展的元素會(huì)把下方的元素向下推，而布局也能隨著內(nèi)容數(shù)量的增減而垂直伸縮。假如你明確設(shè)定了元素的高度，那么超出的內(nèi)容要么被剪掉，要么會(huì)跑到容器之外——取決于元素overflow屬性的設(shè)定。

與高度不同，我們需要更精細(xì)地控制布局寬度，以便隨著瀏覽器窗口寬度的合理變化，布局能夠作出適當(dāng)?shù)恼{(diào)整，確保文本行不會(huì)過長(zhǎng)或過短。如果隨意給元素添加內(nèi)邊距、邊框，或者元素本身過大，導(dǎo)致浮動(dòng)元素的寬度超過包含元素的布局寬度，那浮動(dòng)元素就可能“躲”到其他元素下方。應(yīng)該讓這些內(nèi)容元素自動(dòng)擴(kuò)展到填滿欄的寬度。(這是塊級(jí)元素的默認(rèn)行為)

我們先從一個(gè)簡(jiǎn)單的居中的單欄布局開始吧。看下面 HTML 代碼，主要標(biāo)記的 ID 是 wrapper：

    

        
Single-Column Layout
        
這是第一段
        
This is a Second-Level Heading
        
這是第二段
    

布局相關(guān) css 如下：

#wrapper {
    width:960px; margin:0 auto; border:1px solid;
}
article {
    background:#ffed53;    
}

如圖所示，通過給外包裝設(shè)定寬度值，并將其水平外邊距設(shè)定為 auto，這個(gè)單欄布局在頁(yè)面上居中了。隨著向里添加內(nèi)容，這一欄的高度會(huì)相應(yīng)增加。外包裝中的article元素本質(zhì)上就是一個(gè)沒有寬度的塊級(jí)盒子（關(guān)于“沒有寬度的盒子”，請(qǐng)參見3.2節(jié)），它水平擴(kuò)展填滿了外包裝。

下面，我們?cè)傧蛲獍b里添加一個(gè)導(dǎo)航元素，讓它作為第二欄。

HTML 代碼如下：

    
    

        
Single-Column Layout
        
這是第一段
        
This is a Second-Level Heading
        
這是第二段.
    

這里我們將兩欄都添加float: left，以讓它們并排顯示。

#wrapper {
    width:960px; 
    margin:0 auto; 
    border:1px solid; 
    overflow:hidden;
}
nav {
    width:150px;
    float:left; /*浮動(dòng)*/
    background:#dcd9c0;
    }
nav li {
    /*去掉列表項(xiàng)目符號(hào)*/
    list-style-type:none;
    }
article {
    width:810px;
    float:left; /*浮動(dòng)*/
    background:#ffed53;    
    }

這里我們把兩欄的總寬度設(shè)定為外包裝的寬度（150+810=960），并浮動(dòng)它們，就可以創(chuàng)造出并肩排列的兩欄來(lái)。每一欄的長(zhǎng)度取決于內(nèi)容多少。

接下來(lái)我們添加第三欄。

    
    

        
Single-Column Layout
        
這是第一段
        
This is a Second-Level Heading
        
這是第二段.
    
    

接下來(lái)我們調(diào)整一下 article 這一欄的寬度，為第三欄騰出空間

#wrapper {
    width:960px; margin:0 auto; border:1px solid; overflow:hidden;
}
nav {
    width:150px;
    float:left;
    background:#dcd9c0;
}
article {
    width:600px;
    float:left;
    background:#ffed53;    
}
aside {
    width:210px;
    float:left;
    background:#3f7ccf;
}

如圖所示，通過把三個(gè)浮動(dòng)容器的總寬度設(shè)定為恰好等于外包裝的寬度（150+600+210=960），就有了三欄布局的框架。

現(xiàn)在我們?cè)偬砑右粋€(gè)頁(yè)眉和頁(yè)腳：

    

        
A Fixed-Width Layout
    
    
    

        
Single-Column Layout
        
這是第一段
        
This is a Second-Level Heading
        
這是第二段.
    
    
       

為了讓頁(yè)腳在最下一欄不浮動(dòng)到 aside 后邊，我們?yōu)轫?yè)腳應(yīng)用clear:both，以組織它向上移動(dòng)。
css 樣式如下：

* {margin:0; padding:0;} 
#wrapper {
    width:960px;
    margin:0 auto;
    border:1px solid;
} 
header {
    background:#f00;
} 
nav {
    width:150px;
    float:left;
    background:#dcd9c0;
} 
nav li {
    list-style-type:none;
} 
article {
    width:600px;
    float:left;
    background:#ffed53;
}
aside {
    width:210px;
    float:left;
    background:#3f7ccf;
} 
footer {
    clear:both;
    background:#000;
}

現(xiàn)在效果如圖：

現(xiàn)在各欄太擁擠，每欄的高度也都由文本內(nèi)容決定，我們現(xiàn)在修改一下，為內(nèi)容間加上空白。

為了讓內(nèi)容與欄邊界空開距離，為欄添加水平外邊距和內(nèi)邊距，但這樣會(huì)導(dǎo)致布局寬度增大，進(jìn)而浮動(dòng)欄下滑。
比如，我們給 article 增加內(nèi)邊距：

article {
    width: 600px;
    float: left;
    background: #ffed53;
    padding: 10px 20px;
}

效果如圖：

由于增加了內(nèi)邊距導(dǎo)致article的總寬度增加，導(dǎo)致右邊的欄不能再與前兩排并列在一起。有三種方法來(lái)預(yù)防改問題發(fā)生：

從設(shè)定的元素寬度中減去添加的水平外邊距、邊框和內(nèi)邊距的寬度和。

在容器內(nèi)部的元素上添加內(nèi)邊距或外邊距。

使用CSS3的box-sizing屬性切換盒子縮放方式，比如section {box-sizing:border-box;} 。 應(yīng)用box-sizing屬性后，給section添加邊框和內(nèi)邊距都不會(huì)增大盒子，相反會(huì)導(dǎo)致內(nèi)容變窄。

一個(gè)代代相傳的解決方案是通過數(shù)學(xué)計(jì)算。CSS開發(fā)者需要用比他們實(shí)際想要的寬度小一點(diǎn)的寬度，需要減去內(nèi)邊距和邊框的寬度。比如我們給600像素寬的中間欄增加了20像素的內(nèi)邊距，為了抵消增加的內(nèi)邊距，可以把欄減少40像素而設(shè)定為560像素。值得慶幸地是你不需要再這么做了...

把外邊距和內(nèi)邊距應(yīng)用到內(nèi)容元素上確實(shí)有效，不過這樣的前提是這些元素沒有明確的設(shè)定寬度，這樣內(nèi)容才會(huì)隨內(nèi)外邊距的增加而縮小。
與其為容器中的元素添加外邊距，不如在欄中再添加一個(gè)沒有寬度的div，讓它包含所有內(nèi)容元素，然后再給這個(gè)div應(yīng)用邊框和內(nèi)邊距。如此一來(lái)，只要為內(nèi)部div設(shè)定一次樣式，就可以把讓所有內(nèi)容元素與欄邊界保持一致的距離。而且，將來(lái)再需要調(diào)整時(shí)也會(huì)很方便。任何新增內(nèi)容元素的寬度都由這個(gè)內(nèi)部div決定。

下面我們用這種方法修復(fù)上面第三欄浮動(dòng)到下邊的問題。

接下來(lái)，我們不僅要給內(nèi)部 div 應(yīng)用內(nèi)邊距，還要給她應(yīng)用外邊距和邊框。

/*更新 css*/
article {
    width:600px;
    float:left;
    background:#ffed53;
}
article .inner {
    margin:10px; 
    border:2px solid red;
    padding:20px; 
}

效果如圖：

以上措施使布局有了明顯改觀。就這么簡(jiǎn)單的幾下，布局就顯得更專業(yè)了。處理欄及其內(nèi)部div的關(guān)鍵在于，浮動(dòng)欄并設(shè)定欄寬，但不給任何內(nèi)容元素設(shè)定寬度。要讓內(nèi)容元素?cái)U(kuò)展以填充它們的父元素——內(nèi)部div。這樣，只要簡(jiǎn)單地設(shè)定內(nèi)部div的外邊距和內(nèi)邊距，就可以讓它們以及它們包含的內(nèi)容與欄邊界保持一定距離。

人們慢慢的意識(shí)到傳統(tǒng)的盒子模型不直接，所以他們新增了一個(gè)叫做 box-sizing 的CSS屬性。當(dāng)你設(shè)置一個(gè)元素為 box-sizing: border-box; 時(shí)，此元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度。這里有一個(gè)與前一頁(yè)相同的例子，唯一的區(qū)別是兩個(gè)元素都設(shè)置了 box-sizing: border-box;

nav {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:150px;
    float:left;
    background:#dcd9c0;
    padding:10px 10px;
    }
article {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:600px;
    float:left;
    background:#ffed53;    
    padding:10px 20px;
}
aside {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:210px;
    float:left;
    background:#3f7ccf;
    padding:10px 10px;
}

這是目前為止最好的解決方法了，那最簡(jiǎn)單有效的方法就是在 css 里添加這樣一條規(guī)則：

* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;        
    }

中欄流動(dòng)布局的目的是在屏幕變窄時(shí)，中欄變窄，左欄和右欄寬度不變。
這里我們使用負(fù)外邊距實(shí)現(xiàn)。

實(shí)現(xiàn)三欄布局且讓中欄內(nèi)容區(qū)流動(dòng)（不固定）的核心問題是處理右欄的定位，并在中欄內(nèi)容區(qū)大小改變時(shí)控制右欄與布局的關(guān)系。

這里我們使用Ryan Brill給出的控制兩個(gè)外包裝容器的外邊距的解決方案。其中一個(gè)外包裝包圍三欄，另一個(gè)外保障包圍左欄和中欄。

html代碼示例如下：

    

        
    
    
/*三欄外包裝（包圍全部三欄）*/
        
/*兩欄外包裝（包圍左欄和中欄）*/ /*左欄*/
             /*中欄*/
            

                
            
        
/*結(jié)束兩欄外包裝（twocolwrap）*/ /*右欄*/
        
    
/*結(jié)束三欄外包裝（threecolwrap）*/
    
 

css規(guī)則如下：

* {
    margin: 0;
    padding: 0;
}

body {
    font: 1em helvetica, arial, sans-serif;
}

div#main_wrapper {
    min-width: 600px;
    max-width: 1100px;
    /*超過最大寬度時(shí)，居中布局*/
    margin: 0 auto;
    /*背景圖片默認(rèn)從左上角開始拼接*/
    background: url(images/bg_tile_150pxw.png) repeat-y #eee;
}

header {
    padding: 5px 10px;
    background: #3f7ccf;
}

div#threecolwrap {
    /*浮動(dòng)強(qiáng)制它包圍浮動(dòng)的欄*/
    float: left;
    width: 100%;
    /*背景圖片右對(duì)齊*/
    background: url(images/bg_tile_210pxw.png) top right repeat-y;
}

div#twocolwrap {
    /*浮動(dòng)強(qiáng)制它包圍浮動(dòng)的欄*/
    float: left;
    width: 100%;
    /*把右欄拉到區(qū)塊外邊距騰出的位置上*/
    margin-right: -210px;
}

nav {
    float: left;
    width: 150px;
    background: #f00;
    padding: 20px 0;
}

/*讓子元素與欄邊界保持一定距離*/

nav>* {
    margin: 0 10px;
}

article {
    width: auto;
    margin-left: 150px;
    /*在流動(dòng)居中的欄右側(cè)騰出空間*/
    margin-right: 210px;
    background: #eee;
    padding: 20px 0;
}

/*讓子元素與欄邊界保持一定距離*/ 
article>* {
    margin: 0 20px;
}

aside {
    float: left;
    width: 210px;
    background: #ffed53;
    padding: 20px 0;
}

/*讓子元素與欄邊界保持一定距離*/ 
aside>* {
    margin: 0 10px;
}

footer {
    clear: both;
    width: 100%;
    text-align: center;
    background: #000;
}

基本原理：上面兩幅圖展示了流動(dòng)中欄布局。三欄中的右欄是210像素寬。為了給右欄騰出空間，中欄article元素有一個(gè)210像素的右外邊距。包圍左欄和中欄的兩欄外包裝上210像素的負(fù)右外邊距，會(huì)把右欄拉回article元素右外邊距（在兩欄外包裝內(nèi)部右側(cè)）創(chuàng)造的空間內(nèi)。中欄aticle元素的寬度是auto，因此它仍然會(huì)力求占據(jù)浮動(dòng)左欄剩余的所有空間。可是，一方面它自己的右外邊距在兩欄外包裝內(nèi)為右欄騰出了空間，另一方面兩欄外包裝的負(fù)右外邊距又把右欄拉到了該空間內(nèi)。

上面的例子中，我們用到了百分比寬度，百分比是一種相對(duì)于包含塊的計(jì)量單位。你還能同時(shí)使用 min-width 和 max-width 來(lái)限制最大或最小寬度！

你可以用百分比做布局，但是這需要更多的工作。如果我們上邊的例子中 nav 用百分比寬度做布局，當(dāng)窗口寬度很窄時(shí) nav 的內(nèi)容會(huì)以一種不太友好的方式被包裹起來(lái)。

上面的例子我們實(shí)現(xiàn)多欄并列的方式是使用float，不過我們也可以使用inline-block。下邊是我們把 float 替換為inline-block 的例子。

nav {
    width:150px;
    display: inline-block;
    vertical-align: top;
    background:#dcd9c0;
    }
article {
    word-spacing:0;
    width:600px;
    display: inline-block;
    vertical-align: top;
    background:#ffed53;    
    }
aside {
    word-spacing:0;
    width:210px;
    display: inline-block;
    vertical-align: top;
    background:#3f7ccf;
    }

使用inline-block，有一些事情需要你牢記：

vertical-align 屬性會(huì)影響到 inline-block 元素，你可能會(huì)把它的值設(shè)置為 top 。

你需要設(shè)置每一列的寬度

如果HTML源代碼中元素之間有空格，那么列與列之間會(huì)產(chǎn)生空隙

特別是第三條，如果我們不做任何修改，兩個(gè) block 之間會(huì)存在空格，像這樣：

因?yàn)榱信c列之間產(chǎn)生了空格，所以 aside 跑到了下邊。這里最簡(jiǎn)單的解決辦法是：

內(nèi)容

其他解決方案可以參考這篇文章 Fighting the Space Between Inline Block Elements

初次之外，css 還提供了 column、flexbox等布局方式，這些以后有機(jī)會(huì)再介紹吧。

這篇文章我們介紹了用浮動(dòng)的有寬度的元素來(lái)創(chuàng)建多欄布局、如何讓固定布局在頁(yè)面上居中以及讓它們?cè)谝欢ǚ秶鷥?nèi)可以伸縮。同時(shí)也了解了如何使用內(nèi)部div在浮動(dòng)元素中生成間距，而又不會(huì)改變布局的總寬度。

CSS入門指南-2：盒子模型、浮動(dòng)和清除

CSS入門指南-3：定位元素

學(xué)習(xí)CSS布局

Fighting the Space Between Inline Block Elements

Flex 布局教程：語(yǔ)法篇

最后，感謝女朋友支持。