1、width是個雷
很多頁面要求寬度自適應，那麼width設百分比吧，否則塊元素很容易變成粘著不走的狗皮膏藥
當沒有定義元素寬度時，瀏覽器撐滿整行，實際上執行的是width：auto，寬度自適應。
2、IE6不認識min-height
解決辦法就是_height，有時候明明不需要可變高度，如果喜歡沒原則的min-height，那麼記得用_height對付下IE6這個屌絲。
3、float和clear
float和絕對位置都會破壞正常的文檔流，正常流自上而下，而float是一個自左而右或者自右而左的流。
clear僅僅是針對上一個浮動元素而言，如果上面沒有元素浮動，那麼你要清除啥呢？
所謂清除浮動，個人認為就是相對於上一個浮動元素，另起一行。
4、position的relative和static的區別
relative是相對於自己普通流所在位置的定位，而static是文檔普通流，即文檔流的預設情況。
一般情況，relative跟隨top和left兩個值，當然也可以用right和bottom，但切記，一切都是相對於自己的普通流。
如果將 position 設為 relative , absolute 或 fixed,那麼元素會覆蓋沒有設定 position 屬性的元素，姑且把static當沒設position吧。
這說明層級關係中position的權重是較高的。當然如果position有z-index，z-index高的優先，否則，設定了position的比沒設的高，
再然後，如果沒設position，則按文檔流順序，位於後面位置的元素會覆蓋前面的元素。
5、z-index和overflow
用z-index 屬性設定元素的堆疊順序。那麼擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
不過z-index 屬性僅在節點的 position 屬性為 relative, absolute 或者 fixed 時有用哦。
當正常流溢出時，可以選擇overflow的scroll或者hidden屬性。
什麼是溢出？比如父級元素定義的高度是100，子級元素定義的高度是150，這撐不住的50就是溢出。
所以溢出只出現在子級元素溢出父級元素的情況。一般想解決溢出問題 就只要在父級元素上加一個overflow屬性。
兄弟元素之間按照正常的普通的流走不會出現溢出的情況，但當子級元素relative時候，也會出現覆蓋，但這已經脫離了溢出的管轄範圍。
當然父級的overflow對因relative而溢出的子級元素同樣有效。
6、IE有bug就找haslayout
haslayout是IE特有的屬性，很多IE神奇的BUG都和haslayout有關，要記住，有些樣式會觸發haslayout，最常用的是zoom:1
下列元素預設 hasLayout=true <table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee> 有些屬性可以觸發hasLayout ------------------------------------- display 啟動haslayout的值:inline-block 取消hasLayout的值:其他值 -------------------------------------- width/height 啟動hasLayout的值：除了auto以外的值 取消hasLayout的值：auto --------------------------------------- position 啟動hasLayout的值：absolute 取消hasLayout的值：static ---------------------------------------- float 啟動hasLayout的值：left或right 取消hasLayout的值：none --------------------------------------- zoom(IE專有屬性) 啟動hasLayout的值：有值 取消hasLayout的值：narmal或者空值 ---------------------------------------- ie7還有一些額外的屬性可以觸發該屬性： min-height: (任何值) max-height: (任何值除了none) min-width: (任何值) max-width: (任何值除了none) overflow: (任何值除了visible) overflow-x: (任何值除了visible) overflow-y: (任何值除了visible)5 position: fixed
7、神奇的w3c塌陷
什麼都不說，先看看效果吧
<style>#a{background-color: red;height:130px;width:200px;margin-bottom: 20px;}#sub_a{margin-top:30px;background-color: blue;height:100px;width:150px;}</style><div id="a"><div id="sub_a"></div></div>
這是外邊距疊加collapsing-margin問題，collapsing不是瀏覽器bug而是W3C標準哦。請看如下這段：
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
在CSS中，兩個或多個毗鄰（父子項目或兄弟元素）的普通流中的塊元素垂直方向上的 margin 會發生疊加。這種方式形成的外邊距即可稱為外邊距疊加(collapsed margin)。
和我一樣的菜鳥直接去研究下這篇好文章吧
http://www.smallni.com/collapsing-margin/
避免外邊距疊加，其實很簡單：外邊距發生疊加的4個必要條件（2個或多個、毗鄰、垂直方向、普通流），破壞任一個即可。
我們主要來談一下“毗鄰”，只有理解“毗鄰”的概念之後，讓元素互相之間不毗鄰才能元素避免外邊距的疊加。
毗鄰不僅僅是兄弟元素之間，也有可能在父子項目之間，元素之間的外邊距疊加只有在四種情況下才能叫毗鄰：
以上4種情況之間的元素都可能會發生外邊距的摺疊(最後一個是元素自身)，但還要注意的是以上4種關係形成毗鄰還要加一個條件：元素之間沒有被非空內容、padding、border 或 clear 分隔開。
轉自：http://www.cnblogs.com/yingzi/archive/2012/04/13/2445667.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
