CSS學習筆記

css

1.使用inline-block和text-align:center .parent .child 2.使用margin:0 auto;(定寬或者display：table;) .child .child 3.使用絕對定位 4.使用flex布局 /*第一種方法*/ .parent /*第二種方法*/ .parent .child

1.使用vertical-align(元素必須是inline或inline-block，必須設定行高或者table-cell) /*第一種方法*/ .parent /*第二種方法*/ .parent 2.使用絕對定位 .parent .child 3.使用flex布局 .parent

1.利用vertical-align,text-align,inline-block實現 .parent .child 2.利用絕對定位實現 .parent .child 3.利用flex實現 .parent

1.利用float+clearfix實現左右布局

2.利用position:absolute;實現左右布局

1、絕對定位法

左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。

css**如下（為截圖）：

html**為（）：

您可以狠狠地點選這裡：絕對定位法演示demo

2、margin負值法

這種方法是在實際的**中應用的最多的。首先，中間的主體要使用雙層標籤。外層div寬度100%顯示，並且浮動（本例左浮動，下面所述依次為基礎），內層div為真正的主體內容，含有左右210畫素的margin值。左欄與右欄都是採用margin負值定位的，左欄左浮動，margin-left為-100%，由於前面的div寬度100%與瀏覽器，所以這裡的-100%margin值正好使左欄div定位到了頁面的左側；右側欄也是左浮動，其margin-left也是負值，大小為其本身的寬度即200畫素。

見下面的css**：

您可以狠狠地點選這裡：margin負值法演示demo

您需要注意幾個div的順序，無論是左浮動還是右浮動，先是主體部分div，這是肯定的，至於左右兩欄誰先誰後，都無所謂，我測試了ie6，firefox，以及chrome瀏覽器，表現一致。

此方法的優點：三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——布局不易受內部影響。

缺點在於：相對比較難理解些，上手不容易，**相對複雜。出現百分比寬度，過多的負值定位，如果出現布局的bug，排查不易。

3、自身浮動法

此方法**最簡單。應用了標籤浮動跟隨的特性。左欄左浮動，右欄右浮動，主體直接放後面，就實現了自適應。

您可以狠狠地點選這裡：自身浮動法演示demo

css**如下：

這裡三個div標籤的順序的關鍵是要把主體div放在最後，左右兩欄div順序任意。

此方法的優點是：**足夠簡潔與高效

不足在於：中間主體存在克星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。

css布局用到的一般就幾種：浮動，inline-block,display：table；，flex,還有框架。浮動與clearfix .clearfix 寫css一般可以清除預設的margin和padding,標題的字重和列表的樣式： * h1,h2,h3,h4,h5,h6 ol,ul

@whhjdi

CSS學習筆記

CSS學習 CSS學習筆記

CSS學習 CSS學習筆記

CSS 學習筆記

CSS學習筆記

CSS學習 CSS學習筆記

CSS學習 CSS學習筆記

CSS 學習筆記

相關推薦