學習CSS教程:學習CSS網頁布局

文章簡介：你也許知道什麼叫選取器，什麼叫屬性，什麼叫數值，也許你對css布局略懂一二，但這還遠遠不夠。如果你想著從頭開始學習HTML和CSS的話，我建議你認真查看下 this tutorial. 否則，在工作的時候，你依然陷入迷惘的泥潭中苦苦掙紮。

這個篇文章介紹的是現在廣泛使用於網站布局領域的CSS基礎。

你也許知道什麼叫選取器，什麼叫屬性，什麼叫數值，也許你對css布局略懂一二，但這還遠遠不夠。如果你想著從頭開始學習HTML和CSS的話，我建議你認真查看下 this tutorial. 否則，在工作的時候，你依然陷入迷惘的泥潭中苦苦掙紮。

零布局

如果你希望你的網頁內容以一個欄的形式顯示出來的話，那麼就用不著使用css布局了。然而，如果使用者的瀏覽器介面調整得很寬的話，那麼每一次看完一行文字的時候，你的視線都要從右至左地移動到下一行，很麻煩啊有沒有，你自己調整一下介面的大小就知道我所說的情況了。

在我們解決這個問題之前，先讓我們瞭解下一個非常重要的display屬性吧。

"display"屬性

在控制布局方面,display是最重要的css屬性，每一個元素都有其預設的display屬性值，大部分的預設值不是block就是inline，用block標記的元素一般稱為區塊層級元素，而用inline的元素一般稱為內嵌元素。

block

Div標籤是區塊層級元素的代表，區塊層級元素佔據著整整獨立的一行，其他常見的區塊層級元素有p和form，還有hml5中加入的header，section和footer等等。

inline

Span標籤是內嵌元素的代表，內嵌元素能夠避免破壞段落結構的情況下，往其中添加文本段落。而元素a就是最常見的內嵌元素，經常用他來作連結使用。

none

另一個比較常見的display屬性值就是none，像script這些比較特別的元素的預設屬性值就是none，他經常被用來隱藏javascript語句，適當隱藏暫時不用著顯示的元素.但這區別於visibility。設定display：none的元素，經過頁面的渲染過後，就好像這個元素不存在了。而設定visibility：hidden；的時候，同樣會對該元素進行隱藏，但是，如果他被完全隱藏的時候，其依然還是佔據原來的空間。換句話說 display：none會真的把你弄沒，而bisibility：hidden則僅僅是為你披上一件隱藏衣而已，你還在原來的地方獃著。

其他display屬性

除了上面講到的display屬性值之外，其實還有很多display屬性值，比如list-item以及table這些。（連結）這裡有一個詳盡的列表。我們接下來還會討論到inline-block和flex，敬請期待。

<4>友情提示

正如我所提到的，每一個元素都具備一個預設的的display屬性值。其實你完全可以忽略這句話！雖然說div在預設情況下不可能是內聯的，但是你定製出你想要的display屬性值元素。舉個常見的例子來說吧，li內嵌元素常常被用作水平的菜單。

線上查看

擴充閱讀

1. "display" property
2. display
3. CSS display: inline-Block: Why It Rocks, And Why It Sucks
4. Use CSS display:table for Layout
5. display

——大漠

margin: auto;

#main {   width: 600px;   margin: 0 auto;  } 

在區塊層級元素中設計width屬效能夠防止在水平上撐滿容器。然後，你還能夠設定左右margin來進行水平置中。在中間佔據指定的水平寬度，然後剩下來的寬度空間就會一分為二成為左右外邊距。

現在唯一需要解決的問題就是，一旦瀏覽器的顯示視窗的寬度小於你設定的元素寬度。瀏覽器就會自動加上一個水平捲軸來進行內容顯示，有時這種情況不是我們想要的，需要改進改進。

線上查看

擴充閱讀

1. Box model
2. CSS CENTERING 101
3. How to Center Anything With CSS
4. Equal Height Column Layouts with Borders and Negative Margins in CSS
5. Collapsing Margins

——大漠

Max-width

#main {   max-width: 600px;   margin: 0 auto;  } 

使用max-width來代替width能夠提升瀏覽器對小視窗情況的處理效果。這個處理方法在移動端上顯得更加尤為重要。現在你就可以調整下視窗的大小，來對照下吧！

順便說下，max-width得到了所有的主流瀏覽器的支援包括IE7在內，所以儘管使用它就行了。

Box模型

當我們談及width的時候，我們應該談論到關於width一個重要的注意點，box模型。當你在元素中設定width，該元素的實際大小一般大於你的所設定的數值：元素的border以及padding會在原設定寬度的大小上進一步撐大容器的寬度。看看下面的例子，兩個設定相同width大小的容器，卻是以不同大小的形式顯示出來。

.simple {   width: 500px;   margin: 20px auto; }  .fancy {   width: 500px;   margin: 20px auto;   padding: 50px;   border-width: 10px; } 

線上查看

一般來說，我們需要通過計算來解決這個問題，css開發人員總是需要預先把容器設定得小一點（減去border以及padding佔據的寬度）來最終達到理想的大小，讓人慶幸的是，現在你再也不用這麼苦逼了。

Box-sizing

隨著日子一天一天過，人們越來越發現為容器的大小計算得非常苦逼，於是，一個名字叫box-sizing的css屬性新鮮出爐了。當你在容器當中設定box-sizing：border-box的時候，容器中的border和padding已經不能影響該容器的寬度了。下面的例子和上面的例子大部分都一樣，只是下面的例子多了個box-sizing：border-box；

.simple {   width: 500px;   margin: 20px auto;   -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;           box-sizing: border-box; }  .fancy {   width: 500px;   margin: 20px auto;   padding: 50px;   border: solid blue 10px;   -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;           box-sizing: border-box; } 

線上查看

這是目前為止保持寬度大小一致最好的解決辦法了，css開發人員把下面css代碼放在他們的頁面上，這樣，頁面上所有容器都具備這種屬性了。

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

這樣，頁面上的所有元素就可以得到更加直觀的排版。

由於box-sizing是相當新的屬性，你應該像我之前的例子那樣添加-webkit-和-moz-首碼，這樣在其對應的瀏覽器中得到更好的顯示。IE8+支援這個屬性的。

擴充閱讀

1. CSS3 Box-sizing
2. Box Sizing
3. A Look Into: CSS3 Box-Sizing
4. box-sizing
5. Start using CSS box-sizing today
6. ‘box-sizing’ property

——大漠

Position

為了應對更加複雜的布局需求，我們就不能忽略position這個屬性。它有一攬子有用的屬性，而且他們的名稱又抽象難記，好吧，我們一個一個地攻破它吧，不過你要做好打持久戰的心理準備哦。

static

.static {   position: static; } 

Static是元素與生俱來的預設屬性。它表示著不進行特殊的定位。一般來說static屬性工作表示該元素沒有被定位，而一旦把position屬性設定其他值的時候，那麼就表示該元素被定位了。

relative

.relative1 {   position: relative; } .relative2 {   position: relative;   top: -20px;   left: 20px;   background-color: white;   width: 500px; } 

relative表現跟staitc一樣，除非你另外添加了其他的屬性。

在相對（position：relative）定位的元素中設定top，left，right，bottom屬性都會使得改元素的位置發生改變。而且其他內容的位置不會因為該元素位置的改變而改變。

fixed

Fixed屬性值的元素相對於視窗進行相對定位，也就是不管你的捲軸滾到哪裡去，該元素總會出現在螢幕的相同位置。和position一樣，屬性top，right，bottom和left都會用上。

我想你一定注意到了在螢幕的右下方的fixed屬性。好吧，現在你可以仔細地研究研究它了，下面是相關的css代碼。

.fixed {   position: fixed;   bottom: 0;   right: 0;   width: 200px;   background-color: white; } 

一個fixed元素不會影響其在頁面中的已經定位了的布局。然而移動端的瀏覽器對fixed屬性的支援卻表現得很差勁，這裡有相應的解決方案。

absolute

Absolute是最複雜的position屬性值了，absolute跟fixed相似，只是fixed相對於視窗進行定位，而absolute則是相對於最近的一個父系定位元素進行定位而已，如果absolute沒有父系定位元素的話，那麼他就相對文檔中的body元素，也就是說會跟隨頁面的滾動而移動。記住，被定位元素就是那些具備position屬性且屬性值不為static的元素。

下面是一個簡單的例子

.relative {   position: relative;   width: 600px;   height: 400px; } .absolute {   position: absolute;   top: 120px;   right: 0;   width: 300px;   height: 200px; } 

class=“relative”，改元素屬於相對定位。如果該元素設定為position：static；那麼其子系絕對位置就不會脫離該元素，而跑去跟body對齊了。

class=“absolute”：該元素屬於絕對位置，相對於其父系進行定位。

這個東西非常棘手，但要想弄出一個優秀的css布局你就必須學習它。下面，將給大家帶來關於position更多優秀的例子。

線上查看

Position例子

一個實際的例子能夠使我們對position的印象更加深刻。下面是一個真正的頁面配置

.container {   position: relative; } nav {   position: absolute;   left: 0px;   width: 200px; } section {   /* position is static by default */   margin-left: 200px; } footer {   position: fixed;   bottom: 0;   left: 0;   height: 70px;   background-color: white;   width: 100%; } body {   margin-bottom: 120px; } 

線上查看

section中設定margin-left就是為了能夠給nav騰出足夠的空間，否則absolute元素就會和static元素相互重疊。

留意當你改變視窗大小的時候發生了什麼。效果非常不錯。

如果你對footer或者header設定了position：fixed；要記得給他們騰出個地方來，而對於footer我就在body中設定了一個margin-bottom的值給它。

在該容器高度大於nav的時候，能夠正常顯示。否則nav就會脫離container。接下來，我們將會為你繼續分析其他css布局技術的優劣之處。

擴充閱讀

1. 十步圖解CSS的position
2. HTML和CSS進階指南之二——定位詳解
3. CSS Positioning 101
4. CSS Positioning: A Comprehensive Look
5. position

——大漠

float

另一個要介紹的css布局屬性就是float。Float可以實現文字在圖片周圍浮動的效果，如下圖所示。

img {   float: right;   margin: 0 0 1em 1em; } 

線上查看

擴充閱讀

1. CSS的Float之一
2. CSS的Float之二
3. 應不應該使用inline-block代替float
4. All About Floats
5. CSS Floats 101
6. Float vs. Inline-Block

——大漠

clear

Clear就是一個控制float的一個有用屬性，我們可以對比下面的兩個例子：

<div class="box">...</div> <section>...</section> 

.box {   float: left;   width: 200px;   height: 100px;   margin: 1em; } 

線上查看

在這個例子中， section 元素實際上是在 div 之後的（譯註：DOM結構上）。然而 div 元素是浮動到左邊的，於是 section 中的文字就圍繞了 div ，並且 section 元素包圍了整個元素。如果我們想讓 section 顯示在浮動元素之後呢？

.box {   float: left;   width: 200px;   height: 100px;   margin: 1em; } .after-box {   clear: left; } 

線上查看

使用 clear 我們就可以將這個段落移動到浮動元素 div 下面。你需要用 left 值才能清除元素的向左浮動。你還可以用 right 或 both 來清除向右浮動或同時清除向左向右浮動。

清除浮動（clearfix hack）

當我們使用float的時候，有時候會遇到一些意外的棘手問題。

img {   float: right; } 

線上查看

噔噔噔~有個叫clearfix hack的方法來解決這個問題，但是有點煩人哦，讓我們來嘗試添加一個新的css語句。

.clearfix {   overflow: auto; } 

現在再看看發生了什麼：

線上查看

這個可以在現代瀏覽器上工作。如果你想要支援IE6，你就需要再加入如下樣式：

.clearfix {   overflow: auto;   zoom: 1; } 

有些獨特的瀏覽器需要“額外的關照”。清除浮動這譚水很深很深，但是這個簡單的解決方案已經可以在今天所有的主要瀏覽器上工作。

擴充閱讀

1. Clear Float
2. CSS Float Theory: Things You Should Know
3. Page layout with floats and clearing
4. Clearing floats

——大漠

浮動布局例子

看到布局到處都用到float那是再常見不過的事情了。下面的布局是我們之前介紹position的時候用到的，現在用float代替position也能夠實現相同的效果。

nav {   float: left;   width: 200px; } section {   margin-left: 200px; } 

線上查看

這個例子和之前那個外觀一模一樣。請注意我們在容器上做了“清除浮動”。原本在這個例子中是不需要的，但是當 nav 比非浮動的內容還要高時就需要了。

百分比寬度

你可以使用百分比來進行布局，但是這個需要更多的代碼。在下面的執行個體中，當視窗太過狹小的時候這個nav容器會被壓扁。所以在選擇布局方案的時候，要考慮你設計到的內容。

article img {   float: right;   width: 50%; } 

線上查看

你甚至還能同時使用 min-width 和 max-width 來限制圖片的最大或最小寬度！

百分比寬度布局

你可以使用百分比來進行布局，但是這個需要更多的代碼。在下面的執行個體中，當視窗太過狹小的時候這個nav容器會被壓扁。所以在選擇布局方案的時候，要考慮你設計到的內容。

nav {   float: left;   width: 25%; } section {   margin-left: 25%; } 

線上查看

當布局很窄時， nav 就會被擠扁。更糟糕的是，你不能在 nav 上使用 min-width 來修複這個問題，因為右邊的那列是不會遵守它的。

Media queries

“響應式設計”是一個網站根據在不同瀏覽器以及裝置平台上都能夠做出不同表現的效果的方案，你可以現在改變下視窗的大小，再也沒有比這更酷的了。

要做到這點，媒體查詢這步工作必不可少。現在讓我們用百分比寬度布局，接著調整瀏覽器的大小，一直到其無法容納nav菜單的時候，布局開始就成了一列顯示，代碼如下。

@media screen and (min-width:600px) {   nav {     float: left;     width: 25%;   }   section {     margin-left: 25%;   } } @media screen and (max-width:599px) {   nav li {     display: inline;   } } 

線上查看

現在我們的布局在行動瀏覽器上也顯示的很棒。這裡有一些同樣使用了媒體查詢的著名網站。在MDN文檔中你還可以學到更多有關媒體查詢的知識。

友情提示

在使用meta viewport之後，在移動端的布局會更加錦上添花。

擴充閱讀

1. CSS3 Media Queries
2. 媒體查詢
3. How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
4. Media Queries
5. CSS Media Queries & Using Available Space
6. How to use CSS3 Orientation Media Queries

——大漠

inline-block

我們可以很好地使用網格來鋪滿整個瀏覽器。在之前的很長一段時間中，我們都使用float來實現，但是現在inline-block能夠更輕易地完成任務。Inline-block跟inline差不多但是他們具備一個width和height。下面讓我們比較下兩者的例子吧。

困難的方式（使用浮動）

.box {   float: left;   width: 200px;   height: 100px;   margin: 1em; } .after-box {   clear: left; } 

線上查看

容易的方式（使用 inline-block）

你同樣能夠使用display：inline-block最後實現相同的結果。

.box2 {   display: inline-block;   width: 200px;   height: 100px;   margin: 1em; } 

線上查看

如果需要IE6和IE7支援inline-block這個屬性值得話，你還需要做些工作。大家在談論inline-block的時候，你只需要記得在老式的瀏覽器觸發一個叫haslayout的東西就可以了。如果你對這方面高度興趣的話，那麼請你點擊前面的連結，深入瞭解一下吧，如果沒有問題的話，我們繼續進入到下一步的學習。

inline-block 布局

你同樣可以使用inline-block來進行布局，但有些地方需要我們注意的：

• Vertical-align屬效能夠影響inline-block，你可能需要把vertical設定值為top。
• 你需要在每一欄上面設定寬度。
• 如果在html中他們存在空格代碼，那麼列與列之間同樣也會存在間隙。

nav {   display: inline-block;   vertical-align: top;   width: 25%; } .column {   display: inline-block;   vertical-align: top;   width: 75%; } 

線上查看

擴充閱讀

1. What’s the Deal With Display: Inline-Block?
2. Using inline-block to Display a Product Grid View
3. Fighting the Space Between Inline Block Elements
4. 如何解決inline-block元素的空白間距
5. inline-block

——大漠

column

這裡有一系列新的CSS屬性，可以協助你很輕鬆的實現文字的多欄版面配置。讓我們瞧瞧：

.three-column {   padding: 1em;   -moz-column-count: 3;   -moz-column-gap: 1em;   -webkit-column-count: 3;   -webkit-column-gap: 1em;   column-count: 3;   column-gap: 1em; } 

線上查看

Css column是非常新穎的屬性，因此你需要對其使用首碼標明，而且這個屬性不被IE9及以下和Opera Mini所支援。下面有更多與column相關的屬性，點擊這裡瞭解更多，沒問題的話，那我們繼續學習下一個。

擴充閱讀

1. CSS3 Multi-columns 之column-gap column-rule
2. CSS3 Multi-columns 之列數和列寬
3. CSS3 Multi-columns 之跨列
4. Multiple Columns Layout (Magazine-Alike) With CSS3
5. An Introduction To The CSS3 Multiple Column Layout Module
6. CSS Multi-column Layout Module
7. CSS3 Multi-column layout
8. Multiple Columns

——大漠

flexbox

新的 flexbox 配置模式被用來重新定義CSS中的布局方式。很遺憾的是最近規範變動過多，導致各個瀏覽器對它的實現也有所不同。不過我仍舊想要分享一些例子，來讓你知道即將發生的改變。這些例子目前只能在支援 flexbox 的 Chrome 瀏覽器中運行，最新的標準。

網上有太多過時的flexbox相關資源。如果你想對flexbox有更深的瞭解，從這裡，學習識別關於flexbox資源是否是最新的。我已經整理出一篇關於最新標準的詳細文章。

使用flexbox你還可以做的更多；這裡只是一些讓你瞭解概念的例子：

.container {   display: -webkit-flex;   display: flex; } nav {   width: 200px; } .flex-column {   -webkit-flex: 1;           flex: 1; } 

線上查看

使用 Flexbox 的牛逼布局

.container {   display: -webkit-flex;   display: flex; } .initial {   -webkit-flex: initial;           flex: initial;   width: 200px;   min-width: 100px; } .none {   -webkit-flex: none;           flex: none;   width: 200px; } .flex1 {   -webkit-flex: 1;           flex: 1; } .flex2 {   -webkit-flex: 2;           flex: 2; } 

線上查看

使用 Flexbox 的置中布局

.vertical-container {   display: -webkit-flex;   display: flex;   height: 300px; } .vertically-centered {   margin: auto; } 

線上查看

擴充閱讀

1. flexbox
2. 一個完整的Flexbox指南
3. 深入瞭解 Flexbox 伸縮盒模型
4. IE10中的Flexible Box("Flexbox")布局
5. “老”的Flexbox和“新”的Flexbox
6. 使用Flexbox：新舊文法混用實現最佳瀏覽器安全色
7. 跨瀏覽器的Flexbox
8. 看看接下來會發生什麼：CSS3 Flexible Boxes
9. 響應式設計的未來——Flexbox
10. 使用CSS3 Flexbox布局
11. Flexbox——快速布局神器
12. Flexbox中動畫內幕
13. CSS3實現水平垂直置中

——大漠

css架構

Css架構博大精深，為了讓我們更好地實現css布局，一些css架構應運而生了，下面為大家提供一些css架構以供參考。最後個人建議，不要總是寄希望於這些css架構，只有你熟悉瞭解css才是王道。

擴充閱讀

1. framework
2. 8個實用的響應式設計架構
3. 16個優秀的Responsive CSS架構
4. 天涯html & css基礎架構
5. 30+ CSS Grid System

——大漠

到此為止！如果你對本篇教程有任何反饋，請在Twitter上聯絡我！

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

關於LL

廣東某大學在讀大學生，熱愛Web前端，對前端技術有強烈的興趣，在這裡希望有機會和大家共同分享與交流，從而更好的提升自己。請關注我：新浪微博

如需轉載煩請註明出處：

英文原文：http://learnlayout.com/