position
1、position屬性取值：static(預設)、relative、absolute、fixed、inherit。
2、postision：static；始終處於文件流給予的位置。看起來好像沒有用，但它可以快速取消定位，讓top，right，bottom，left的值失效。在切換的時候可以嘗試這個方法。
3、除了static值，在其他三個值的設定下，z-index才會起作用。（確切地說z-index只在定位元素上有效）
4、position：relative和absolute都可以用於定位，區別在於前者的div還屬於正常的文件流，後者已經是脫離了正常文件流，不佔據空間位置，不會將父類撐開。定位原點relative是相對於它在正常流中的預設位置偏移，它原本佔據的空間任然保留；absolute相對於第一個position屬性值不為static的父類。所以設定了position：absolute，其父類的該屬性值要注意，而且overflow：hidden也不能亂設定，因為不屬於正常文件流，不會佔據父類的高度，也就不會有滾動條。
5、position：fixed 舊版本IE不支援，定位原點相對於瀏覽器視窗，而且不能變。常用於header，footer，或者一些固定的懸浮div，隨滾動條滾動又穩定又流暢，比JS好多了。fixed可以有很多創造性的佈局和作用，相容性是問題。
6、position：inherit。規定從父類繼承position屬性的值。但是任何版本的IE都不支援該屬性值。

display
1、display屬性取值：none、inline、inline-block、block、flex、inherit。
2、display屬性規定元素應該生成的框的型別。文件內任何元素都是框，塊框或行內框。
3、display：none和visiability：hidden都可以隱藏div，區別有點像absolute和relative，前者不佔據文件的空間，後者還是佔據文件的位置。
4、display：inline和block，又叫行內元素和塊級元素。表現出來的區別就是block獨佔一行，在瀏覽器中通常垂直佈局，可以用margin來控制塊級元素之間的間距；而inline以水平方式佈局，垂直方向的margin和padding都是無效的，大小跟內容一樣，且無法設定寬高。inline就像塑料袋，內容怎麼樣，就長得怎麼樣；block就像盒子，有固定的寬和高。
5、inline-block就介於兩者之間。
6、display: flex 意為"彈性盒佈局模型"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為flex佈局。設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。採用flex佈局的元素，稱為flex容器。它的所有子元素自動成為容器成員，稱為flex專案（flex item）。
容器的屬性：以下6個屬性設定在容器上。
    flex-direction    決定主軸的方向（專案的排列方向）。
        row（預設值）：主軸為水平方向，起點在左端。
        row-reverse：主軸為水平方向，起點在右端。
        column：主軸為垂直方向，起點在上沿。
        column-reverse：主軸為垂直方向，起點在下沿。
    flex-wrap   預設情況下，專案都排在一條線上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
        nowrap（預設）：不換行。
        wrap：換行，第一行在上方。
        wrap-reverse：換行，第一行在下方。
    flex-flow   flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
    justify-content     定義了專案在主軸上的對齊方式。假設主軸為從左到右。
        flex-start（預設值）：左對齊
        flex-end：右對齊
        center： 居中
        space-between：兩端對齊，專案之間的間隔都相等。
        space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
    align-items     定義專案在交叉軸上如何對齊。假設交叉軸從上到下。
        flex-start：交叉軸的起點對齊。
        flex-end：交叉軸的終點對齊。
        center：交叉軸的中點對齊。
        baseline: 專案的第一行文字的基線對齊。
        stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
    align-content   義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
        flex-start：與交叉軸的起點對齊。
        flex-end：與交叉軸的終點對齊。
        center：與交叉軸的中點對齊。
        space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
        space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
        stretch（預設值）：軸線佔滿整個交叉軸。
專案的屬性：以下6個屬性設定在專案上。
    order           定義專案的排列順序。數值越小，排列越靠前，預設為0。
    flex-grow       定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
    flex-shrink     定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
    flex-basis      定義了在分配多餘空間之前，專案佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
    flex        flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性
    align-self      align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。