當有定位元素（position），和浮動元素（float）時，margin：0 auto會失效。如果是標準的塊級元素，margin：0 auto正常使用。
如果寫樣式，最好是用class的方式引用，id的方式最好是最外層的盒子使用。也就是說只有最外層的盒子使用id方式，內部全部用class的方式。
清除浮動（clearfix）：讓子元素可以撐開父元素的高度。
可以使用 :after偽元素 清除浮動，給浮動元素的容器新增乙個clearfix的class，然後給這個class新增乙個:after偽元素實現元素之後新增乙個看不見的塊元素（block element）清理浮動。
練習：首先給需要等高的元素加padding-bottom：10000px，margin-bottom：-10000px；
然後給他們總的盒子加overflow：hidden
兩組實現的對比:
1.倆種布局方式都是把主列放在文件流最前面，使主列優先載入。
2.兩種布局方式在實現上也有相同之處，都是讓三列浮動，然後通過負外邊距形成三列布局。
3.兩種布局方式的不同之處在於如何處理中間主列的位置：
聖杯布局是利用父容器的左、右內邊距+兩個從列相對定位；
雙飛翼布局是把主列巢狀在乙個新的父級塊中利用主列的左、右外邊距進行布局調整
css2 1筆記 元素的包含塊
乙個元素的尺寸和位置經常受其包含塊的影響。大多數情況下，包含塊就是這個元素最近的祖先塊元素的內容區，但也不是總是這樣。可能你會認為包含塊就是其父元素的內容區，但事實並非如此。如果某些屬性被賦予乙個百分值的話，它的計算值是由這個元素的包含塊計算而來的。這些屬性包括盒模型屬性和偏移屬性 要計算 heig...
CSS3 筆記3 彈性盒布局flex
使用css3中的乙個box flex屬性就可以隨著瀏覽器視窗的改變而自適應。彈性盒布局是在盒布局的基礎上進行自適應。彈性盒布局相容性 webkit box flex 1 safara瀏覽器 chrome瀏覽器 moz box flex 1 firefox瀏覽器 數字1 是指所佔的比例份數。比如第乙個...
HTML5 CSS3筆記 流式布局
那用 em 替換 px 還有什麼必要性或優越性呢?有兩點顯而易見的理由 一是那些使用 internet explorer 6 的使用者也將能夠縮放文字 二是這樣做可以使我們設計師和開發者的生活更簡單。em 的實際大小是相對於其上下文的字型大小而言的。如果我們給body標籤設定文字大小為 100 給其...