以下是自己平時學習累計的，比較雜，歡迎大家指正和補充 一、css重置（css reset） 這是我簡單整理的，並不全，大家可以根據自己需要繼續補充： body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}ol,ul{margin:0;padd
以下是自己平時學習累計的，比較雜，歡迎大家指正和補充
一、css重置（css reset）
這是我簡單整理的，並不全，大家可以根據自己需要繼續補充：
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
不用*{margin:0;padding:0；}是因為：div沒有內外邊距，p只有外邊距問題沒有內邊距問題等等，性能問題也不好，大家可以自己寫標簽通過比如火狐的F12來看到元素的內外邊距情況。
二、全屏遮罩
頁面文檔結構是：body<html<文檔，body和html是沒有高度的，如果需要情況下：設置為height：100%，這樣body裡面有內容高度為100%才能和文檔高度一樣，才能實現全屏遮罩
三、內嵌和塊元素
內嵌元素：內容撐開寬度，不支持寬高，不支持margin和padding的上下邊距，左右支持，代碼換行被解析為空格（即並沒有緊挨著在一排顯示，而是每行顯示一個那種情況）這種是被解析為一個空格的大小的間隙，是頁面中文字大小的一半，比如body中設置為font-size為12px，則間隙為6像素
塊屬性標簽：沒有寬度時，預設撐滿一排，支持寬高，支持所有css命令
img既不是內聯也不是塊，而是inline-block內聯塊元素
inline-block特性有：沒有寬度的時候內容撐開寬度
ie6、ie7不支持塊屬性標簽的inline-block（解決方案：用浮動）
塊元素不設置寬，預設跟著父級的寬度走，如果父元素不設置高度而子元素設置高度，則子元素會撐開父元素高度
四：cursor屬性
cursor:url(xxx.cur),pointer;意思是：可以jpg、gif、png等，但可能有相容性問題，最好用.cur格式，pointer意思是如果前面圖片出問題出不來了，則使用pointer，相當於是個備用
五、浮動
1、不設置寬度情況下還是由內容撐開寬度
2、設置為浮動後則脫離了文檔流，同時對設置了浮動的元素設置vertical-align是沒效果的，因為浮動元素預設就是頂部對齊並且是不可更改的，想要解決這種預設則通過設置上下邊距
3、在IE6/7下，元素浮動要併在同一行的元素都要加浮動，不然元素會換行
4、IE6下的橫向margin的雙邊距bug（橫向margin：0 20px;）,（ie6下，塊屬性標簽，浮動，並且有橫向margin，則橫向margin加倍），解決方案：display:inline
六、定位
定位：
1、絕對定位和浮動一樣，使元素脫離了文檔流，如果沒設置寬度，則使塊屬性標簽內容撐開寬度；
2、絕對定位使得內嵌元素支持寬高；
3、定位元素預設後者比前者的層級高（堆疊層次，但始終不到1），如需改變則使用z-index
4、fixed定位不設置寬度的話，可以讓塊元素內容撐開寬度，與絕對定位基本一致，的差別是始終相對整個文檔進行定位，IE6不支持固定定位，可以通過js一起解決
5、在IE6下，父級的overflow：hidden是包不住設置為position:relative的子級的（這是當子元素高度高於父元素情況下，在一般情況下，設置為relative是對元素本身沒影響的），那麼要解決這個問題就是給父級加定位屬性（相對或絕對定位都行）
6、在IE6下，如果定位元素的父級的寬高是奇數的話，那麼該定位元素的right和bottom都有1像素的偏差，未找到較好的解決方案，則避免父元素寬高為奇數
七、清除浮動
1、給父級也加浮動，但父級還要父級怎麼辦？一層層加？擴展性不好，會導致：頁面中所有元素都加浮動，margin左右自動失效（floats bad ！），結論：不適用，放棄！！
2、給浮動元素的父級加display：inline-block，結論：不好，margin:0 auto失效！
3、給浮動元素後面加個空div，height：0px，但是在IE6下有個最小高度19px，但並不是所有元素都有最小元素，為瞭解決此問題，加個font-size：0；，但是也不能解決IE6下還剩最小高度2px的問題，（樣式為：加個空div，class為clear，樣式為：clear:both;font-size:0;height:0;）解決方案請聽下回分解
4、給浮動元素後面加<br clear="all"/>，這個屬性還有left、right等值，br是沒有高度的，在br里的clear屬性跟用clear:both作用是一樣的，在ie6/7下都起作用了也省事，是可以用方案，但是，但是，不符合w3c標準：結構、樣式、行為分離（寫了個br標簽，改結構了）
5、after偽類並不會改變文檔結構，content:"內容內容"是不會改變結構的（通過F12可以看到，文檔結構里的“內容內容”這幾個字並不存在，但卻可以在頁面上顯示出來，能看見），比如樣式：p:after{content:"內容",background:red;width:10px;height:10px;}那麼背景色變為紅色的地方只會是“內容”，即這個content里的東西，p裡面的文字背景色不會變化，並且寬和高也是對content里的東西起作用，不會影響p元素，但是在IE6/7下只支持a標簽的那個4個偽類，不支持after偽類，但是沒關係，因為在IE6/7下浮動元素的父級有寬度就不用清浮動，那不支持after偽類也沒關係，為啥父級有寬度就不用清浮動了呢？這是因為在ie中有個haslayout的東西（不知道就百度百科）預設為false，有了width就能觸發為true（哪些能觸發去百度），haslayout會根據元素內容的大小或者父級的大小來重新計算元素高度，那麼如果父級不給width怎麼辦呢？這時候就用zoom:1(百度百科里提到zoom除了normal外的值能激發haslayout為true)，zoom有放大、縮小效果，所以一般這樣用：給浮動元素的父級.clear{zoom:1};.clear:after{conetent:"";display:block;clear:both;}（前者解決ie6/7下的清浮動，後者解決其他瀏覽器下的清浮動），現在都是推崇這種清浮動方法，推薦、推薦！！
6、overflow可以包含著浮動元素，所以overflow可以製造清浮動假象，是加給浮動元素的父級的，此方法也可用，但是在IE6下有問題：因為overflow沒有把元素提升層級的功能，那麼配合zoom:1使用，可以激發haslayout，此方法還是少用，可能會隱藏本來應該顯示出來的內容，推薦用第5種方法。
註意：clear這個屬性只能加給塊元素，對於內嵌是不起作用的！！
八、vertical-align
預設圖片下麵會有幾個像素的空隙，1、可通過display:block解決，但是如果想排在一行則就有局限性問題；2、使用vertical-align:top（其他值也行），此方法推薦！！！！
上面說到IE6下最小高度問題通過加font-size為0來解決，但是還是會剩最小高度2px問題，那麼解決方案是加overflow：hidden解決
