css 常見的盒模型

        1、常見的盒模型:inline,inline-block,block,position,table,float
        2、當display:list-item時，它的父元素比須是塊狀元素，必須設置margin/padding爲list-item元素的list-style-type設置項目符號
        3.一個盒模型所具有的屬性:display,width,height,border,margin,padding,overflow,visibility,background

        inline:width,height,overflow在內聯的元素上不起作用，它們總是與內容相一致的
               1、通過line-height設置內聯元素的行高
               2、margin-left和margin-right應用正負值使元素拉近與遠離，margin-top和margin-bottom不起作用
        inline-block:具有塊狀元素的屬性
               1、width:auto,height:auto會使寬度和高度和實際元素相符
               2. width:100%拉伸內聯塊狀元素
        block:設置width屬性,margin-left:auto使元素居右，margin-right:使元素居左,margin-left:auto;margin-right:auto同時設使元素居中
               1、不能水平包裹一個塊狀元素
        table:設置表格的邊框
               1、table{border-collapse:collapse} td{1px solid #ff0000}
               2、collapse使單元格的邊框無縫，不重複應用在table上面,然後設置td的邊框值

         position:absolute:絕對定位
               1、z-index的值越大就顯示在越上面，實現重疊的效果
               2、windth爲auto,left爲auto,right爲auto，包裹元素
               3、width爲auto,left有值right有值,被拉伸
               4、width爲auto，left有值,right爲auto，向左偏離
               5、width爲auto，left爲auto，right有值,向右偏離
               6、height設置高度，與top,bottom配合使用，同3，4，5相關

         float:默認的width:auto,height:auto