網頁的布局其實在我理解起來，就類似于排版的問題。有點像平面設計中的內容排版。只不過平面設計中的排版是在photoshop里做的，而網頁的排版卻要通過寫代碼來實現。排版的意思，把這塊東西放在網頁的哪個地方，和別的東西怎么協調起來排版。布局要搞明白的意思大概就是這個。
布局會涉及到的幾個CSS屬性大致有這么一些。display，主要是用來設置元素的顯示方式，position主要是用來給元素定位的，你可以用這個屬性任意給元素定位到網頁的任何一個地方。float也是用來定位的，只不過它的定位方式跟position有點不同，他只有兩個方向，就是讓元素左浮動或者又浮動。flex是很新鮮的一種流式布局方法，可以用它來做一些不是很復雜的響應式布局。下面我們來詳細介紹下這幾個屬性。
01.display：設置元素的顯示方式
它的值有很多，看下面我收集到的表格。
（1）display的值有哪些？
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示 |
| block | 此元素將顯示為塊級元素。 |
| inline | 默認，此元素會被顯示為內聯元素。 |
| inline-block | 行內塊元素 |
| list-item | 此元素會作為列表顯示 |
| table | 此元素會作為塊級表格來顯示（類似<table>） |
| inline-table | 此元素會作為內聯表格來顯示(類似<table>) |
| table-row-group | 此元素會作為一個或多個行的分組來顯示（類似<tbody>） |
| table-header-group | 此元素會作為一個或多個行的分組來顯示（類似<thead>） |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似<tfoot>） |
| table-row | 此元素會作為一個表格行顯示（類似<tr>） |
| table-column-group | 此元素會會作為一個或多個列的分組來顯示（類似<colgroup>） |
| table-column | 此元素會作為一個單元格列顯示（類似<col>） |
| table-cell | 此元素會作為一個表格單元格顯示（類似<td>和<th>） |
| table-caption | 此元素會作為一個表格標題顯示（類似<caption>） |
其中display最主要的三個值我下面再簡單介紹下，其他的值不是很常用，不過我上面列出來的display的值只是其中的大部分，還算比較常用，如果有能力都要嘗試下，當然除了我下面重點介紹的三個最常用的值之外，其他的值瀏覽器支持的不是很好。
（2）display最常用的三個值介紹
| display | 默認寬度 | 可設置寬高 | 起始位置 | 代表元素有哪些 |
|---|---|---|---|---|
| block | 父元素寬度 | 是 | 換行 | div\p\h1~h6\ol\ul\dl\table\address\blockquot\form |
| inline | 內容寬度 | 否 | 同行 | a\span\br\i\em\strong\label\q\var\cite\code |
| inline-block | 內容寬度 | 是 | 同行 | input\textarea\select\button |
block:默認寬度為父元素的寬度，可設置寬高，換行顯示。
inline：默認寬度為內容寬度，也就是說，如果給這個元素設置了display:inline；元素的寬度就會變成它里面內容的寬度。不可以設置寬高，與別的前后元素之間同行顯示。如果遇到寬度不夠一行要換行的話，inline的元素是會內容拆開來換行的，相對來說，inline-block的元素反而是個整體，不拆開來換行，是整塊換行的。
inline-block：默認寬度為內容寬度，可設置寬高，同行顯示。如何遇到內容不夠一行，是會整塊作為一個整體，整塊換行。inline-block和block的區別是inline-block對內是block屬性，對外顯示是inline屬性，所以block的話，居中可以用margin:auto，但是inline-block用margin:auto就沒用了，不能做到居中，inline-block和block的時候margin:auto的瀏覽器計算方法是不一樣的。
display:inline-block;在ie6、ie7下只有設置在默認顯示方式為inline的元素上才會生效，那么在IE6、IE7下，怎么實現塊級元素的inline-block屬性值設置呢？
E6、IE7支持對html行內元素設置inline-block。實際上只是看起來支持而已，IE6、IE7并不識別inline-block這個屬性值，只是觸發了layout，讓行內元素有了inline-block的表征，比如說：行內顯示且可設置寬高等等。
而對html塊級元素設置inline-block，也只是觸發了layout，對塊級元素設置行內塊級屬性的目的沒有達到。那么在IE6、IE7下，怎么實現塊級元素的inline-block屬性值設置呢？
常見有2種方法：
1.先使用display:inline-block屬性觸發塊元素，然后再定義display:inline，讓塊元素呈遞為行內對象（兩個display 要先后放在兩個CSS聲明中才有效果，這是IE的一個經典bug，如果先定義了display:inline-block，然后再將display設回 inline或block，layout不會消失），代碼如下：
div {display:inline-block;}
div {display:inline;}
2.直接讓塊元素設置為行內對象呈遞（設置屬性display:inline），然后觸發塊元素的layout（如：zoom:1 或float屬性等），代碼如下：
div { display:inline-block; _zoom:1;_display:inline;}/*推薦IE6*/
div { display:inline-block; *zoom:1;*display:inline;}/*推薦IE6或IE7*/
（3）display:none與visibility:hidden的區別
給元素設置了display:none以后，元素就消失了，在元素下面的元素會取代那個消失的元素的位置，而visibility：hidden設置的元素，是顯示隱藏，但是在文檔流中，它原先的位置還在，只是那個位置是空白的，在該元素下面的元素不會竄上來取代它的位置。
02.position:設置定位方式
設置定位方式最重要的是設置參照物。且要配合別的屬性一起使用，有這些屬性：top、right、bottom、left、z-index。
position定位工作原理是先通過設定position：absolute/relative/fixed來確定要定位的參照物。然后通過left\right\top\bottom來設置元素與參照物之間的距離可以從圖中看出，left\right\top\bottom表示元素邊緣與參照物之間的距離。
然后再來講講position：absolute/relative/fixed的意思。relative相對定位，absolute絕對定位，fixed固定定位。三個定位各有自己的特色。
如果給中間的那個橘黃小塊設置了相對定位，它的位置是不會有變化的。仍然在文檔流中。而且它的參照物是元素自己本身。所以一旦給這個元素再追加設置方向值topleft，意思就是相對于元素本身這個參照物原來的位置，左邊距偏移了20px，上邊距偏移了10px。
這個相對定位的屬性，由于是以元素本身作為參照物的，而且如果單純只是給元素設置相對定位的話，元素本身的位置是不發生變化的，因此，它常常用來作為下面要講的絕對定位元素的參照物來設置。
如果給圖片中位于中間的那個深橘色的小塊設置了絕對定位。那么按照絕對定位的特點，這個小塊會脫離文檔流，這樣一來，位于下面的淺色橘黃小塊就會竄上來，取代原先那個深色橘黃小塊的位置。而且由于設置了絕對定位的關系，深色橘黃小塊的寬度會縮小，變成內容寬度。
如果再給這個深色橘黃小塊追加方向值top\left，絕對定位的小塊的參照物如果不設置的話就是html的根元素，如果設置了的話，一般要看它祖先元素是不是設置了相對定位的，設置了的話，就按照那個相對定位的元素為參照物進行位置的偏移。
如果給位于中間的深橘色小塊設置了position:fixed;那么這個小塊會根據固定定位的特色，寬度會收縮成內容寬度，并且脫離文檔流，而位于它下方的淺橘色小塊會竄上來取代它的位置。而固定定位的參照物是瀏覽器視窗，所以一旦給這個深橘色小塊追加方向值left\bottom，那么它位置的偏移就會按照瀏覽器的視窗作為參照物。偏移的結果就看上圖的樣子了。position:fixed 在ie6及以下不支持
03.float
如果給這個深橘色的小塊添加float:right;那么這個小塊的寬度會收縮成內容寬度，并且脫離文檔流，設置了右浮動，就會向右邊一直移動，直到碰到邊界。左浮動就向左邊。
另外，值得注意的是，float對于元素來說是脫離文檔流的，但是對于元素的內容來說是占據文檔流的。這句話怎么理解呢，看下面的圖：
其實對于上圖中的那個淺橘色的小塊來說，它的大小是包括了那個深橘色的小塊的，只不過它左邊的地方被深橘色小塊覆蓋掉了，所以對于淺橘色小塊這個元素來說，深橘色這個float元素是脫離文檔流的。但是奇怪的是淺橘色小塊的內容，確實如圖中這樣顯示的，說明，對內容來說，float元素還是在文檔流占據位置的。
關于清除浮動的方法有兩個，一個是在浮動元素后面加一個空白的元素，給這個空白的元素添加樣式{clear:both;}就好了。比如在浮動元素后面加一個
<br class="cb"/>
.cb{clear:both;height:0;overflow:hidden;visibility:hidden;}
另一種辦法就是clearfix。給浮動元素的父元素添加一個clearfix的類。
.clearfix:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clearfix{zoom:1;}
另外關于為什么要加zoom:1的原因，zoom的作用可以看看這篇文章《CSS中zoom:1的作用 ，小標簽大作用》
04.flex
從缺，有空補~~
