布局學習筆記
布局即將元素以正確的大小擺放在正確的位置
其中重要的屬性有：Display:設置元素的顯示方式，它有以下幾個值（不完全）
block:默認寬度是父元素的寬度 可以設置寬高 換行顯示
inline:默認寬度是內容寬度 不可設置寬高 同行顯式
inline-block：默認寬度為內容寬度 可以設置寬高 同行顯式 整塊換行（後續元素的寬度如果超出範圍，則會整塊換行）表單元素默認是這個屬性
none:設置元素不顯示
還有屬性position（定位）：它可以實現元素疊加，設置定位方式，主要配合使用的屬性有：top right bottom left z-index 設置位置
其中z-index是設置元素在Z軸上的排序，需要註意的是父元素中的Z-index權重總是要比子元素的Z-index要大的。position的值有（不完全）：
static（默認）：沒有定位
relative:仍在文檔流中 參照物為元素本身的位置 使用場景;絕對定位的參照物
absolute:默認寬度是內容的寬度 脫離文檔流 參照物是第一個定位祖先或者根元素
fixed：默認寬度是內容寬度 脫離文檔流 參照物是視窗（瀏覽器窗口））（IE6及以下不支持）
屬性float:它默認寬度也是內容寬度，會脫離文檔流，向指定的方向一直移動。但要註意的是多個float的元素在同一文檔流中，而且其實，float元素是半脫離文檔流的：對於元素是脫離文檔流的即它後續的元素會占據它之前的位置，但對內容是在文檔流的，但內容會圍繞著它，不會被它覆蓋。
與屬性float經常配合使用的是clear:both|left|right。清楚浮動時應用於浮動元素的父元素中的最後，即浮動元素後面，經常給父元素添加clearfix偽類after：內容為： {content:‘.‘;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
2009年，W3C提出了一種新的方案----Flex布局，即彈性布局，使用它可以簡便地實現各種響應式頁面布局。
關於flex我們首先需要認識幾個名詞：flex container:彈性容器；直接子元素flex item：彈性子元素； main axis:主軸；cross axis：副軸
使用display：flex即可設置flex布局容器。
學習flex布局我們需要關註三個方面，即方向、彈性和對齊。
關於方向的屬性有：
flex-direction:row|row-reverse|column|column-revers。它設置的是橫著排還是豎著排
flex-wrap:no-wrap|wrap|wrap-reverse。它設置的是當flex-item超出容器範圍時允不允許換行，怎樣換行。
flex-flow:<‘flex-direction‘>||<‘flex-wrap‘>。它是以上兩個屬性的簡寫形式，即一次性設置以上兩個屬性。這個是推薦的寫法
order：<interger> 初始值為0（順序值）。它設置直接子元素的排列順序，數值越小，排列越靠前。
關於彈性的屬性有：
flex-basis:main-size|<width>。它設置flex item的初始寬高
flex-grow：<number>默認值是0，它設置元素能獲得的空余空間的比例，此時計算元素的寬度公式為：元素寬度=flex-basis+flow-grow/sum(flow-grow) * remain
flex-shrink:默認值為1，它設置的是當空間不足時，如何按比例縮小
flex:<‘flex-grow‘>||<‘flex-shrink‘>||<‘flex-basis‘> 初始值分別為0 1 main-size 它是以上三個屬性的簡寫形式，即一次可以設置三個屬性，是推薦寫法。
關於對齊的屬性有：
justify-content:flex-start|flex-end|center|space-between|space-around。它是設置項目在主軸上的對齊方式
align-items:flex-start|flex-end|center|space-between|space-around。它是設置項目在副軸上的對齊方式
align-self:auto|flex-start|flex-end|center|baseline|stretch。它設置單個flex item在cross-axis方向上對齊方式
align-content：ex-start|flex-end|center|space-between|sapce-around|stretch。設置cross-axis方向上行對齊方式(多行情況)
註意：flex ie9及以下不支持，目前主要用於移動web頁面中。
感謝老範提供的課程，謝謝。
布局學習筆記