position 和 display 的取值和各自的意思和用法

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屬性完全一致。