盒子模型

• 什麼是盒子模型？

  可以把頁面上的每一個元素看成一個盒子，這是一個抽象的概念
  

• 盒子模型的組成

    盒子模型由內容，內邊距，邊框和外邊距組成
  

• 盒子屬性

    border:邊框大小 線型別 顏色;（ 複合屬性）
    border-style:邊框樣式  （虛線dotted，實線solid)
    border-top-style:頂部邊框型別
    border-right-style   右
    border-bottom-style  下
    border-left-style    左
    
    border-color:邊框顏色;
    border-top-color:上邊框顏色;.....
   
  

• 盒子邊距、大小

    padding  內邊距，邊框與內容之間的距離（margin外邊距）
    一個值的時候： 代表四個方向值一樣 上右下左（順時針）
    二個值的時候： 上下  右左
    三個值的時候： 上 右左 下
    四個值的時候： 上  右  下 左
    
    注意： 行內元素-上下無效果,右左有效果
    
    margin:auto;	水平方向快速居中,垂直方向不存在
    margin垂直方向間距合併，水平方向正常
    盒子大小=樣式寬+內邊距+邊框 
  

浮動

• 什麼是浮動？

  浮動，其實就是讓元素脫離正常的文件流，漂浮起來。
  

• ######為什麼需要浮動？ 當正常文件佈局不能解決的時候，則需要脫離正常文件流

• 浮動帶來的問題

    高度塌陷
  

        float:left          左浮動
        float:right         右浮動
        overflow:hidden;	解決坍塌問題

盒子定位

    position:
           static       預設定位。  靜態定位，預設值不會發生任何變化
          relative      相對定位    相對定位，不會脫離文件流以自身元素為參考,可以給 top/right/bottom/left
          absolute      絕對定位  絕對定位，脫離文件流,預設以視窗為參考.有定位父級則父級參考可以給top/right/bottom/left
          fixed         固定定位  固定定位，脫離文件流預設以視窗為參考，可以給top/right/bottom/left視窗滾動，依然不會變.

   fixed    固定定位，相對於瀏覽器視窗進行定位
        方向詞
            left
            right
            top
            bottom
        z-index 規定定位的層級（預設0）
        值：number 值越大層級越高