css佈局的幾個知識點

css佈局的幾個知識點

清除浮動

       在使用浮動的時候會經常遇到一個古怪的事情，就是 對圖片運用float屬性，但是圖片比包含該圖片的元素還高，所以圖片就溢出到了外面，解決方法是：清除浮動，一個簡單的解決方案是，對這個容器（包含圖片的父容器）設置{overflow:auto;zoom:1;}

inline-block佈局

        可以使用inline-block佈局，但要注意一些事情。(1)vertical-align屬性會影響到inline-block元素，你可能會把它的值設置爲top；(2)需要設置每一列的寬度；(3)如果HTML源代碼中元素之間有空格，那麼列與列之間會產生空隙

盒子模型

       有兩種很重要的盒子模型，分別是ie盒子模型和w3c盒子模型。w3c盒子模型是標準的盒子模型，範圍包括margin,border,padding,content.並且content部分不包括其他；IE盒子模型範圍包括margin,border,padding,content，但是ie盒子模型的content部分包含了border和padding

box-sizing

      box-sizing的CSS屬性是用來改變默認的css框模型，用於計算元素的寬度和高度，它可以使用這個屬性來模擬瀏覽器的行爲不正確支持css模型的規範。box-sizing的屬性的默認取值是content-box，測量width和height屬性只包括content，但不是border,padding,margin；padding-box的width和height屬性包括content和padding的大小，不包括border和margin；border-box的width和height屬性包括padding和border，但不是margin。

position

      有四個屬性值：static  relative  absolute fixed。static是position屬性的默認值，即按文檔流順序排列下去；relative將根據top，right，bottom，left的值按照它理應所在的位置進行偏移，如果不設置relative屬性，元素的位置按照正常的文檔流；absolute是按照元素的父級對象（父元素，祖父元素，曾祖父元素等等）設置的Position屬性，只要不是static，的那個元素進行定位；fixed屬性總是以body爲定位對象的，按照瀏覽器的窗口進行定位,即使拖動滾動條，他的位置也是不會改變的。與background-attachment:fixed相似

（PS：下次再補~~）