一、顯示與隱藏
  1 通過display樣式 - none隱藏
    語法 - display:none;
    特點 - 隱藏以後，元素原有的位置會被佔用，
  2 通過visibility - hidden隱藏  
                   - visible顯示（預設值）
    語法 - visibility:hidden;
    特點 - 隱藏以後，元素原有的位置還會保留。
    
二、display樣式
  1 none 設定隱藏
  2 block 將元素變為塊元素的顯示效果。與HTML元素本身並無聯絡。
  3 inline 將元素變為內聯元素的顯示效果。與HTML元素本身並無聯絡。
  4 inline-block 將元素變為行內塊元素的效果顯示。
    * 行內塊元素:
        - 元素本身以塊元素的效果顯示（寬和高設定有效）
        - 元素之間以行內元素的排列方式顯示（水平排列，不會獨佔一行）
    * 補充：行內元素有一個特點，在編寫HTML程式碼時，如果元素之間有空格（包括換行符），
        如： <span>你好</span> <span>你好</span> <span>你好</span>
        或：  <span>你好</span>
              <span>你好</span>
              <span>你好</span> 
        這樣寫，在瀏覽器頁面中顯示時，元素之間也會出現一個“間隙”。
        若： <span>你好</span><span>你好</span><span>你好</span>
        這樣寫，就可以消除間隙，但是程式碼的可讀性不好。

三、overflow樣式（設定子元素溢位時父元素如何處理）
  1 visible 預設值，內容可能會溢位。
    * 內容溢位定義：
        當定義一個元素，並且在此元素定義文字內容，當文字內容過多時，可能顯示會超出當前元素的區域。
        但是在IE6中父元素會被撐開，不會溢位。
  2 hidden 溢位的內容會被修剪，並且修剪掉的內容是不可見的
  3 scroll 瀏覽器會顯示豎直、水平滾動條來顯示內容
  4 auto 有兩種可能的效果
       - 當內容溢位時，會自動新增豎直滾動條（相當於scroll）
       - 當內容不會溢位時，不會新增滾動條。（相當於預設樣式）


四、文件流
  1 定義 - 垂直方向從上到下的順序排列，水平方向從左到右的順序排列
  2 注意 - 預設情況下，排列的順序是不能改變的.
  3 脫離文件流的三種方式： 浮動、絕對定位、固定定位

五、浮動
  1 特點 - 當前元素脫離文件流，並且在頁面中不再佔有位置。
    注意 - 元素設定浮動以後，元素將會最大程度漂浮到元素的最上邊，直到遇到父元素的邊框或其他的浮動元素。
         - 如果父元素的寬度不足以裝下所有的浮動子元素，子元素將會換行。
         - 塊元素 本來不設定浮動時，會佔父元素的100%，設定浮動以後寬度不再佔父元素的100%，而是被子元素撐開。
 - 內聯元素  設定浮動以後會變成塊元素。
  2 可選值 
      - left
      - right
  3 浮動應用的特殊場景
      - 對於父子元素，當設定子元素浮動時，不會超出父元素的範圍。
      - 對於相鄰兄弟元素，存在兩種情況
          - 如果兩個元素都設定了浮動，兩個元素將變為水平排列。
          - 如果前一個元素不設定浮動，後一個元素設定了浮動，
            那麼後一個元素不會超出（最多是齊著）或覆蓋前一個元素。
      - 文字內容不會被浮動的元素覆蓋，會環繞在浮動元素的周圍。
        應用：文字環繞影象效果。


六、高度塌陷問題
    原因：文件流中，預設情況下，沒有設定寬度和高度時，
          預設的寬度是父元素的整個寬度。
          預設的高度是0或者子元素的高度的總和。
    特點：對於父子元素，如果父元素沒有設定高度，子元素設定了高度，並且浮動。
    現象：父元素的高度顯示為0.  —— 高度塌陷問題


七、高度塌陷解決方案：
   * BFC塊級格式化環境
      -  BFC是元素的隱含屬性。預設情況下，BFC是關閉的
      -  如何開啟BFC
          * 將當前元素設定為浮動
          * 將當前元素的 overflow 設定為 非visible 的值(一般為hidden)
          * 在所有子元素的最後，新增一個子元素，並且設定子元素的 clear 屬性值為 both
   * 高度塌陷解決方案
      1 為父級元素設定高度height為所有子元素的高度之和。
        存在問題：需要根據子元素高度人為計算父級元素的height值。


      2 為父級元素和子級元素同時設定浮動，父級元素沒有設定寬度和高度。可以使父元素包裹子元素。
        結果顯示：父級的寬度和高度分別是子元素的寬度和高度之和。


      3 將當前元素的 overflow 設定為 非visible 的值(一般為hidden)


      4 在所有子元素的最後，新增一個子元素，並且設定 clear 屬性值為 both
        注意：清除浮動可以清除其他元素對本元素的影響。
        問題：新增的元素會造成程式碼冗餘。


      5 設定父元素的 :after偽類display為inline-block，然後清除浮動。
        問題：IE6、7不支援    :after偽類。


   * 總結 最好的方式是 -     overflow:hidden
          - 在IE6中不能開啟BFC，但是他有另外一個隱藏屬性：
          - 開啟方式（副作用比較小的）： zoom: 1; (只相容IE6)


八、定位
   * 元素開啟定位以後，如果不設定偏移量，元素不會發生任何變化。


   * 元素開啟定位以後，可以通過z-index來設定元素的層級。
     將z-index設為整數值，值越大，層級越高。


   1 static - 預設值，表示元素不開啟定位
   2 relative - 相對定位
   3 absolute - 絕對定位 
   4 fixed - 固定定位
   
九、絕對定位 absolute
    1 當父級元素沒有設定定位，子級元素設定了定位時，子級元素會根據頁面進行偏移。
    2 當父級元素和子級元素都設定了定位時，子級元素會相對於父級元素設定定位。
    3 行內標籤開啟絕對定位以後，會變成塊級元素（高和寬有效），同時也會脫離文件流。
    4 開啟絕對定位以後，元素會提升一個層級。
    5 當元素設定絕對定位時，寬度和高度預設由內容決定。
    偏移量的設定：
     left和top - 設定距離左邊和上邊的值。
     righthe bottom - 設定距離右邊和下邊的值。

十、固定定位
    1  特點：當元素開啟固定定位以後，會脫離文件流。
       固定定位是絕對定位的一種特殊形式，始終依據瀏覽器視窗來定義自己的顯示位置。
    2  效果：不管瀏覽器滾動條如何滾動，也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示
       在瀏覽器視窗的固定位置。
    3  當行內元素開啟固定定位以後，也會改變元素的性質，即變成塊元素，同時脫離文件流。

十一、相對定位
    1 特點：開啟以後元素相對於元素自身原來的位置發生偏移。
            元素不會脫離文件流，並且元素會提升一個層級（覆蓋沒定位的元素）。
            元素開啟相對定位以後，不會改變元素的性質。
   也就是說塊元素設定相對定位還是塊元素，內聯元素設定相對定位以後還是內聯元素。