css布局之於頁面就如同ECMAScript之於JS一般，細想一番，html就如同語文，css就如同數學，js呢，就是物理，有些扯遠，這里就先不展開了。 回到主題，從最開始的css到如今的sass(less),開發的效率確實變得越來越高效，但是可能有時候我們還是會對頁面布局產生煩惱的情緒，比如:"咦？我想讓它顯示在這個部位，它一點都不聽話啊"。很大原因在於我們可能沒對css布局這塊做一個系統的梳理~，偶然間發現了Learn CSS Layout，在此分享給大家，希望和大家共同提高，另外安利給大家一個如何寫出更加優雅的html&&css代碼的文章，使勁戳我!
填坑"display"
display 是CSS中最重要的用於控制布局的屬性。每個元素都有一個默認的 display 值，這與元素的類型有關。對於大多數元素它們的默認值通常是 block 或 inline 。一個 block 元素通常被叫做塊級元素。一個 inline 元素通常被叫做行內元素。
block：
span 是一個標准的行內元素。一個行內元素可以在段落中
<span> 像這樣 </span>包裹一些文字而不會打亂段落的布局。 a 元素是最常用的行內元素，它可以被用作鏈接。
另一個常用的display值是 none 。一些特殊元素的默認 display 值是它，例如 script。 display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素。
它和 visibility 屬性不一樣。把 display 設置成 none 不會保留元素本該顯示的空間，但是 visibility: hidden; 還會保留。
擴展:
每個元素都有一個默認的 display 類型。不過你可以隨時隨地的重寫它！常見的例子是：把 li 元素修改成 inline，制作成水平菜單。
*inline-block布局
把inline-block單獨拎出來講，說來慚愧，很長一段時間我都是蒙着用它的，對於block、inline、inline-block的區別我自己總結了一句話
block:有寬高，不在同一行； inline:同一行，無寬高； inline-block: 有寬高又在同一行
這算是個小插曲吧，接着我們的布局之旅；在此之前，讀者需可以先閱讀下文的float布局和clear的知識再回頭來看這知識會容易不少，然后我們會對比inline-block布局相對於float布局的優勢；
困難的方式（float布局）
.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
.box 我在浮動
.box 我在浮動
.box 我在浮動
.box 我在浮動
.box 我在浮動
.box 我在浮動
.box 我在浮動
.box 我在浮動
.box 我在浮動
.box 我在浮動
.box 我在浮動
.after-box 我在使用 clear，所以我不會浮動到上面那堆盒子的旁邊。
容易的方式（使用inline-block）
你可以用 display 屬性的值 inline-block 來實現相同效果。
.box2 { display: inline-block; width: 200px; height: 100px; margin: 1em; }
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
.box2 我是一個行內塊！
這次我可沒有用 clear 。太棒了！
使用inline-block布局的注意項:
①vertical-align 屬性會影響到 inline-block 元素，你可能會把它的值設置為 top 。
②你需要設置每一列的寬度
③如果HTML源代碼中元素之間有空格，那么列與列之間會產生空隙
你得做些額外工作來讓IE6和IE7支持 inline-block 。有些時候人們談到 inline-block 會觸發叫做 hasLayout 的東西，你只需要知道那是用來支持舊瀏覽器的。如果你對此很感興趣，可以在后面的鏈接中找到更詳細的信息。
margin:auto&&max-width
margin:auto:
#main { width: 600px; margin: 0 auto; }
設置塊級元素的 width 可以阻止它從左到右撐滿容器。然后你就可以設置左右外邊距為 auto 來使其水平居中。元素會占據你所指定的寬度，然后剩余的寬度會一分為二成為左右外邊距。
唯一的問題是，當瀏覽器窗口比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。讓我們再來改進下這個方案...
max-width:
#main { max-width: 600px; margin: 0 auto; }
在這種情況下使用 max-width 替代 width 可以使瀏覽器更好地處理小窗口的情況。這點在移動設備上顯得尤為重要，調整下瀏覽器窗口大小檢查下吧！
順便提下， 所有的主流瀏覽器包括IE7+在內都支持 max-width ，所以放心大膽的用吧。
盒模型
在我們討論寬度的時候，我們應該講下與它相關的一個重點知識：盒模型。當你設置了元素的寬度，實際展現的元素卻能夠超出你的設置：因為元素的邊框和內邊距會撐開元素。看下面的例子，兩個相同寬度的元素顯示的實際寬度卻不一樣。
.simple { width: 500px; margin: 20px auto; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border: 10px #6AC5AC solid; }
class="simple":
我小一些...
class="fancy":
我比它大！
以前有一個代代相傳的解決方案是數學。CSS開發者需要用比他們實際想要的寬度小一點的寬度，需要減去內邊距和邊框的寬度。值得慶幸地是你不需要再這么做了，讓我們接着看...
※box-sizing※
這個部分是我着重向大家分享的知識點，因為自己以前沒掌握o(╯□╰)o，推薦大家多用用box-sizing屬性；
經過了一代又一代人們意識到數學不好玩，所以他們新增了一個叫做 box-sizing 的CSS屬性。當你設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。這里有一個與前一頁相同的例子，唯一的區別是兩個元素都設置了 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: 10px #6AC5AC solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
class="simple":
我們現在一樣大小了！
class="fancy":
萬歲！
既然沒有比這更好的方法，一些CSS開發者想要頁面上所有的元素都有如此表現。所以開發者們把以下CSS代碼放在他們頁面上：
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
既然 box-sizing 是個很新的屬性，目前你還應該像我之前在例子中那樣使用 -webkit- 和 -moz- 前綴。這可以啟用特定瀏覽器實驗中的特性。同時記住它是支持IE8+。
position布局
為了制作更多復雜的布局，我們需要討論下 position 屬性。它有一大堆的值，名字還都特抽象，別提有多難記了。讓我們先一個個的過一遍,不過你最好還是把這頁放到書簽里。
static:
.static { position: static; }
static 是默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被“positioned”，一個 position 屬性被設置為其他值的元素表示它會被“positioned”。
relative:
relative是我項目里用到的最多的屬性了，它通常和絕對定位相結合；
.relative1 { position: relative; } .relative2 { position: relative; top: -20px; left: 20px; width: 500px; }
relative1 表現的和 static 一樣，除非你添加了一些額外的屬性。
在一個相對定位（position屬性的值為relative）的元素上設置 top、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其他的元素則不會調整位置來彌補它偏離后剩下的空隙。
fixed:
一個固定定位（position屬性的值為fixed）元素會相對於視窗來定位，這意味着即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom和 left 屬性都可用。
一個固定定位元素不會保留它原本在頁面應有的空隙。
令人驚訝地是移動瀏覽器對 fixed 的支持很差。這里有相應的解決方案.
absolute:
absolute 是最棘手的position值。 absolute 與 fixed 的表現類似，除了它不是相對於視窗而是相對於最近的“positioned”祖先元素。如果絕對定位（position屬性的值為absolute）的元素沒有“positioned”祖先元素，那么它是相對於文檔的 body 元素，並且它會隨着頁面滾動而移動。記住一個“positioned”元素是指position 值不是 static的元素。
這里有一個簡單的例子：
.relative { position: relative; width: 600px; height: 400px; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; }
這個元素是相對定位的。如果它是 position: static; ，那么它的絕對定位子元素會跳過它直接相對於body元素定位。
這個元素是絕對定位的。它相對於它的父元素定位。
給想練手的新同學留個小作業吧，用relative+absolute實現出下面這個簡單的登錄Demo，后期貼上源碼；
以上這部分可能有些難理解，但它是創造優秀布局所必需的知識。
float布局
另一個布局中常用的CSS屬性是 float 。Float 可用於實現文字環繞圖片，如下：
img { float: right; margin: 0 0 1em 1em; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
*clear
clear 屬性被用於控制浮動。比較下面兩個例子：(貌似博客園不支持<section>標簽,代碼里我用<div>代替，大家懂意思就行)
<div class="box">我感覺好像我在漂浮！</div>
<section> 在這個例子中， section 元素實際上是在 div 之后的（譯注：DOM結構上）。然而 div 元素是浮動到左邊的，於是 section 中的文字就圍繞了 div ，並且 section 元素包圍了整個元素。如果我們想讓 section 顯示在浮動元素之后呢？</section>
.box { float: left; width: 200px; height: 100px; margin: 1em; }
div class="box" 我感覺好像我在漂浮！
section 在這個例子中， section 元素實際上是在 div 之后的（譯注：DOM結構上）。然而 div 元素是浮動到左邊的，於是 section 中的文字就圍繞了 div ，並且 section 元素包圍了整個元素。如果我們想讓 section 顯示在浮動元素之后呢？
.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
div class="box" 我感覺好像我在漂浮！
section class="after-box" 使用 clear 我們就可以將這個段落移動到浮動元素 div 下面。你需要用 left 值才能清除元素的向左浮動。你還可以用 right 或 both 來清除向右浮動或同時清除向左向右浮動。
*清除浮動(clearfix hack)
img { float: right; }
不......這個圖片比包含它的元素還高， 而且它是浮動的，於是它就溢出到了容器外面！
見證奇跡的時刻到了！有一種比較丑陋的方法可以解決這個問題，它叫做清除浮動（clearfix hack）.
讓我們加入一些新的CSS樣式：
.clearfix { overflow: auto; }
現在再看看發生了什么：
<div class="clearfix"> 好多了！
這個可以在現代瀏覽器上工作。如果你想要支持IE6，你就需要再加入如下樣式：
.clearfix { overflow: auto; zoom: 1; }
有些獨特的瀏覽器需要“額外的關照”。清除浮動這譚水很深很深，但是這個簡單的解決方案已經可以在今天所有的主要瀏覽器上工作。
百分比寬度布局
百分比是一種相對於包含塊的計量單位。它對圖片很有用：如下我們實現了圖片寬度始終是容器寬度的50%。把頁面縮小看下效果！
article img { float: right; width: 50%; }
你甚至還能同時使用 min-width 和 max-width 來限制圖片的最大或最小寬度！
你可以用百分比做布局，但是這需要更多的工作。總而言之，選一種最合適你的內容的方式。附上之前做的一個用百分比做布局的項目。
這是微信端的展示，從中我們可以看出如果用百分比布局來做界面比較明朗的界面的話，那在兼容多種終端上，它能幫我們省下不少力氣，另外該項目已經開源，喜歡的朋友可以去star一下喲；項目地址
媒體查詢
“響應式設計（Responsive Design）”是一種讓網站針對不同的瀏覽器和設備“響應”不同顯示效果的策略，這樣可以讓網站在任何情況下顯示的很棒！
媒體查詢是做此事所需的最強大的工具。
現在我們的布局在移動瀏覽器上也顯示的很棒。這里有一些同樣使用了媒體查詢的著名站點。在MDN文檔中你還可以學到更多有關媒體查詢的知識。
demo @media screen and (min-width:640px) { ... } @media screen and (max-width:768px) { ... }
補充：使用 meta viewport 之后可以讓你的布局在移動瀏覽器上顯示的更好。
使用方法：<meta name=”viewport” content=”” />
在實際項目中，為了讓Responsive設計在智能設備中能顯示正常，也就是瀏覽Web頁面適應屏幕的大小，顯示在屏幕上，可以通過這個可視區域的meta標簽進行重置，告訴他使用設備的寬度為視圖的寬度，也就是說禁止其默認的自適應頁面的效果，具體設置如下：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
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; }
為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布局方面，這種布局在報紙和雜志上都使用了幾十年了，但要在Web頁面上實現這樣的效果還是有相當大的難度，為此W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。
CSS columns是很新的標准，所以你需要使用前綴，並且它不被IE9及以下和Opera Mini支持。還有許多和 column 相關的屬性，點擊這里了解更多。
flexbox布局
新的 flexbox 布局模式被用來重新定義CSS中的布局方式。很遺憾的是最近規范變動過多，導致各個瀏覽器對它的實現也有所不同。這次分享一些例子，來讓你知道即將發生的改變。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運行，基於最新的標准。
網上有不少過時的 flexbox 資料。 如果你想要了解更多有關 flexbox 的內容，從這里學習如何辨別一份資料是否過時。或者查看關於最新標准的詳細文章。
使用flexbox你還可以做的更多；這里只是一些讓你了解概念的例子：
使用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; }
.initial 空間足夠的時候，我的寬度是200px，如果空間不足，我會變窄到100px，但不會再窄了。
.none 無論窗口如何變化，我的寬度一直是200px。
.flex1 剩余寬度的1/3。
.flex2 我會占滿剩余寬度的2/3。
使用Flexbox的居中布局
.vertical-container { height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
寫在最后
再次感謝Learn CSS Layout 的作者，給我們帶來了如此絕妙的css布局盛宴，同時也感謝敏明君和sunnylost的翻譯，在以上前輩力作的基礎上，雲雲加了不少個人觀點，如有不當，還請博友們指出。原作是如此優秀，忍不住讓雲雲連續花了6個多小時，整理並手敲實現了每行樣式代碼。真心建議有時間的朋友能好好閱讀下原文以及其中諸多的超棒的鏈接，不管對知識的鞏固亦或是進階一定大有裨益！最后，十分感謝朋友們的閱讀，望與大家共同提高！