網(wǎng)頁的布局其實在我理解起來矿瘦，就類似于排版的問題。有點像平面設(shè)計中的內(nèi)容排版愿卒。只不過平面設(shè)計中的排版是在photoshop里做的缚去，而網(wǎng)頁的排版卻要通過寫代碼來實現(xiàn)。排版的意思琼开，把這塊東西放在網(wǎng)頁的哪個地方易结，和別的東西怎么協(xié)調(diào)起來排版。布局要搞明白的意思大概就是這個柜候。
布局會涉及到的幾個CSS屬性大致有這么一些搞动。display，主要是用來設(shè)置元素的顯示方式渣刷，position主要是用來給元素定位的鹦肿，你可以用這個屬性任意給元素定位到網(wǎng)頁的任何一個地方。float也是用來定位的辅柴，只不過它的定位方式跟position有點不同箩溃，他只有兩個方向，就是讓元素左浮動或者又浮動碌嘀。flex是很新鮮的一種流式布局方法涣旨，可以用它來做一些不是很復(fù)雜的響應(yīng)式布局。下面我們來詳細介紹下這幾個屬性股冗。
01.display：設(shè)置元素的顯示方式
它的值有很多霹陡，看下面我收集到的表格。
（1）display的值有哪些魁瞪？
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示 |
| block | 此元素將顯示為塊級元素穆律。 |
| inline | 默認惠呼，此元素會被顯示為內(nèi)聯(lián)元素导俘。 |
| inline-block | 行內(nèi)塊元素 |
| list-item | 此元素會作為列表顯示 |
| table | 此元素會作為塊級表格來顯示（類似<table>） |
| inline-table | 此元素會作為內(nèi)聯(lián)表格來顯示(類似<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 | 默認寬度 | 可設(shè)置寬高 | 起始位置 | 代表元素有哪些 |
|---|---|---|---|---|
| block | 父元素寬度 | 是 | 換行 | div\p\h1~h6\ol\ul\dl\table\address\blockquot\form |
| inline | 內(nèi)容寬度 | 否 | 同行 | a\span\br\i\em\strong\label\q\var\cite\code |
| inline-block | 內(nèi)容寬度 | 是 | 同行 | input\textarea\select\button |
block:默認寬度為父元素的寬度，可設(shè)置寬高凯沪，換行顯示第焰。
inline：默認寬度為內(nèi)容寬度，也就是說妨马，如果給這個元素設(shè)置了display:inline挺举；元素的寬度就會變成它里面內(nèi)容的寬度。不可以設(shè)置寬高烘跺，與別的前后元素之間同行顯示湘纵。如果遇到寬度不夠一行要換行的話，inline的元素是會內(nèi)容拆開來換行的滤淳，相對來說梧喷，inline-block的元素反而是個整體，不拆開來換行脖咐，是整塊換行的铺敌。
inline-block：默認寬度為內(nèi)容寬度，可設(shè)置寬高屁擅，同行顯示适刀。如何遇到內(nèi)容不夠一行，是會整塊作為一個整體煤蹭，整塊換行笔喉。inline-block和block的區(qū)別是inline-block對內(nèi)是block屬性，對外顯示是inline屬性硝皂，所以block的話常挚，居中可以用margin:auto，但是inline-block用margin:auto就沒用了稽物，不能做到居中奄毡，inline-block和block的時候margin:auto的瀏覽器計算方法是不一樣的。
display:inline-block;在ie6贝或、ie7下只有設(shè)置在默認顯示方式為inline的元素上才會生效吼过，那么在IE6、IE7下咪奖，怎么實現(xiàn)塊級元素的inline-block屬性值設(shè)置呢盗忱？
E6、IE7支持對html行內(nèi)元素設(shè)置inline-block羊赵。實際上只是看起來支持而已趟佃，IE6、IE7并不識別inline-block這個屬性值，只是觸發(fā)了layout闲昭，讓行內(nèi)元素有了inline-block的表征罐寨，比如說：行內(nèi)顯示且可設(shè)置寬高等等。
而對html塊級元素設(shè)置inline-block序矩，也只是觸發(fā)了layout鸯绿，對塊級元素設(shè)置行內(nèi)塊級屬性的目的沒有達到。那么在IE6簸淀、IE7下楞慈，怎么實現(xiàn)塊級元素的inline-block屬性值設(shè)置呢？
常見有2種方法：
1.先使用display:inline-block屬性觸發(fā)塊元素啃擦，然后再定義display:inline囊蓝，讓塊元素呈遞為行內(nèi)對象（兩個display 要先后放在兩個CSS聲明中才有效果，這是IE的一個經(jīng)典bug令蛉，如果先定義了display:inline-block聚霜，然后再將display設(shè)回 inline或block，layout不會消失）珠叔，代碼如下：
div {display:inline-block;}
div {display:inline;}
2.直接讓塊元素設(shè)置為行內(nèi)對象呈遞（設(shè)置屬性display:inline）蝎宇，然后觸發(fā)塊元素的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的區(qū)別
給元素設(shè)置了display:none以后祷安，元素就消失了姥芥，在元素下面的元素會取代那個消失的元素的位置，而visibility：hidden設(shè)置的元素汇鞭，是顯示隱藏凉唐，但是在文檔流中，它原先的位置還在霍骄，只是那個位置是空白的台囱，在該元素下面的元素不會竄上來取代它的位置。
02.position:設(shè)置定位方式
設(shè)置定位方式最重要的是設(shè)置參照物读整。且要配合別的屬性一起使用簿训，有這些屬性：top、right米间、bottom强品、left、z-index屈糊。
position定位工作原理是先通過設(shè)定position：absolute/relative/fixed來確定要定位的參照物的榛。然后通過left\right\top\bottom來設(shè)置元素與參照物之間的距離可以從圖中看出，left\right\top\bottom表示元素邊緣與參照物之間的距離另玖。
然后再來講講position：absolute/relative/fixed的意思困曙。relative相對定位，absolute絕對定位谦去，fixed固定定位慷丽。三個定位各有自己的特色。
如果給中間的那個橘黃小塊設(shè)置了相對定位鳄哭，它的位置是不會有變化的要糊。仍然在文檔流中。而且它的參照物是元素自己本身妆丘。所以一旦給這個元素再追加設(shè)置方向值topleft锄俄，意思就是相對于元素本身這個參照物原來的位置，左邊距偏移了20px勺拣，上邊距偏移了10px奶赠。
這個相對定位的屬性，由于是以元素本身作為參照物的药有，而且如果單純只是給元素設(shè)置相對定位的話毅戈，元素本身的位置是不發(fā)生變化的，因此愤惰，它常常用來作為下面要講的絕對定位元素的參照物來設(shè)置苇经。
如果給圖片中位于中間的那個深橘色的小塊設(shè)置了絕對定位。那么按照絕對定位的特點宦言，這個小塊會脫離文檔流扇单，這樣一來，位于下面的淺色橘黃小塊就會竄上來奠旺，取代原先那個深色橘黃小塊的位置蜘澜。而且由于設(shè)置了絕對定位的關(guān)系，深色橘黃小塊的寬度會縮小响疚，變成內(nèi)容寬度兼都。
如果再給這個深色橘黃小塊追加方向值top\left，絕對定位的小塊的參照物如果不設(shè)置的話就是html的根元素稽寒，如果設(shè)置了的話扮碧，一般要看它祖先元素是不是設(shè)置了相對定位的，設(shè)置了的話杏糙，就按照那個相對定位的元素為參照物進行位置的偏移慎王。
如果給位于中間的深橘色小塊設(shè)置了position:fixed;那么這個小塊會根據(jù)固定定位的特色，寬度會收縮成內(nèi)容寬度宏侍，并且脫離文檔流赖淤，而位于它下方的淺橘色小塊會竄上來取代它的位置谅河。而固定定位的參照物是瀏覽器視窗咱旱，所以一旦給這個深橘色小塊追加方向值left\bottom确丢，那么它位置的偏移就會按照瀏覽器的視窗作為參照物。偏移的結(jié)果就看上圖的樣子了吐限。position:fixed 在ie6及以下不支持
03.float
如果給這個深橘色的小塊添加float:right;那么這個小塊的寬度會收縮成內(nèi)容寬度鲜侥，并且脫離文檔流，設(shè)置了右浮動诸典，就會向右邊一直移動描函，直到碰到邊界。左浮動就向左邊狐粱。
另外舀寓，值得注意的是，float對于元素來說是脫離文檔流的肌蜻，但是對于元素的內(nèi)容來說是占據(jù)文檔流的互墓。這句話怎么理解呢，看下面的圖：
其實對于上圖中的那個淺橘色的小塊來說蒋搜，它的大小是包括了那個深橘色的小塊的轰豆，只不過它左邊的地方被深橘色小塊覆蓋掉了，所以對于淺橘色小塊這個元素來說齿诞，深橘色這個float元素是脫離文檔流的酸休。但是奇怪的是淺橘色小塊的內(nèi)容，確實如圖中這樣顯示的祷杈，說明斑司，對內(nèi)容來說，float元素還是在文檔流占據(jù)位置的但汞。
關(guān)于清除浮動的方法有兩個宿刮，一個是在浮動元素后面加一個空白的元素，給這個空白的元素添加樣式{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;}
另外關(guān)于為什么要加zoom:1的原因踩叭，zoom的作用可以看看這篇文章《CSS中zoom:1的作用 磕潮，小標簽大作用》
04.flex
從缺，有空補~~
