1、怪異模式和DTD
標准模式：浏覽器根據規范表現頁面
怪異模式：模擬老浏覽器行為防止老站點無法工作（為了兼容老式浏覽器的代碼），如果漏寫DTD（Document Type Definition文檔定義類型）聲明，firefox會按照標准模式來解析網頁，但在IE中就會觸發怪異模式。
兩種模式的差異比較大，比較典型的是IE對盒模型的解析；在標准模式中，網頁元素的寬度是由padding、border、width三者的寬度相加決定的，而在怪異模式中，width本身就包括了padding和border的寬度
2、如何組織CSS？
按功能劃分：font.css color.css layout.css 等
按區塊劃分：head.css foot.css sidebar.css main.css等
作者建議:base.css + common.css +page.css
base層提供CSS reset功能（覆蓋浏覽器默認樣式）和通用原子類（文字、定位、長寬、邊距）,具有高度可移植性
common層是網站級的，不同的網站有不同的common層，同一個網站只有一個common層；網站中高度重要的模塊，稱之為組件
page層位於最高層，提供頁面級的樣式
3、模塊化CSS
拆分模塊的技巧：
①模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應將他們提取出來，拆分成一個獨立的模塊
②模塊應該在保證數量盡可能少的原則下，做到盡可能簡單，以提高重用性
CSS命名規則
①推薦使用英語
②駝峰命名法 用於區別不同的單詞，劃線用於表明從屬關系
③如何避免多人合作時命名沖突？可以使用姓名首字母縮寫做為標識符，比如zzl-timeList-lastItem
多用組合，少用繼承
如何處理上下margin？
margin是個有點特殊的樣式，相鄰的margin-left和margin-right是不會重合的，但相鄰的margin-top和margin-booton會產生重合；
所以最好統一使用margin-top或者margin-bottom，不要混合使用
總結：如果不確定模塊的上下margin特別穩定，最好不要講它寫到模塊的類裡，而是使用類的組合，單獨為上下margin掛用於邊距的原子類（例如：mt10、mb20）,
模塊最好不要混動margin-top或者margin-booton，統一使用margin-top或margin-bootom
4、低權重原則--避免濫用子選擇器
CSS的選擇符是有權重的，當不同選擇符的樣式設置有沖突時，會采用權重高的選擇符設置的樣式。權重規則：HTML標簽權重是1，class權重是10，id的權重是100，
例如：p的權重是1，『div em』的權重是1+1=2，『strong.demo』的權重是1+10=11，『#test.red』的權重是100+10=110
如果CSS權重符相同，那麼樣式會遵循就近原則（選擇符定義的先後順序，而不是class名的先後順序，<span class="test test2">和<span class="test2 test">是一樣的），哪個選擇符最後定義，就采用哪個選擇符的樣式
使用子選擇器，會增加CSS選擇符的權重，CSS選擇符的權重越高，樣式越不容易被覆蓋，越容易對其他選擇符產生影響。
為了保證樣式容易被覆蓋，提高可維護性，CSS選擇符需要保證權重盡可能低
5、CSS sprite
最大好處是減輕服務器的壓力，對於流量不大的網站來說，CSS sprite帶來的好處並不明顯；所以是否使用CSS sprite主要取決於網站流量
將網站的背景圖 合到一張大圖片上。對於流量大的網站來說，改技術很有價值
①能合並的只能是用於背景的圖片，對於<img src=""/>設置的圖片，是不能合並到CSS sprite大圖中的，會影響頁面可讀性
②對於橫向和縱向都平鋪的圖片，也不能使用CSS sprite；如果是橫向平鋪的，只能講所有橫向平鋪的圖片合並成一張大圖，只能豎直排列
6、CSS的常見問題
6.1 編碼風格
多行式
.test{
width:100px;
height:50px;
color:#ccc;
}
一行式
.test{width:100px;height:50px;color:#ccc}
隨著前端調試工具的日益強大，一行式編碼風格成為了主流。
6.2 id和class
①同一個網頁，相同的id只能出現一次，不可重復；class可以出現多次
②id的CSS選擇符權重為100，而class的選擇符權重為10
③原生JS 提供getElementById（）方法，支持通過id對應到相關的HTMLElement，但原生JS不支持通過class得到HTMLElement
所以一般情況下，建議盡量使用class，少用id
6.3 CSS hack
①IE條件注釋法
針對不同IE版本分別導入樣式 <!--[ if IE 6]> <link type="text/CSS" href="ie6.css" rel="stylesheet"> <![endif]--> <!--[ if IE 7]> <link type="text/CSS" href="ie7.css" rel="stylesheet"> <![endif]--> <!--[ if IE 8]> <link type="text/CSS" href="ie8.css" rel="stylesheet"> <![endif]-->
雖然向後兼容性是最好的，缺點也很明顯：將同一CSS選擇符樣式 分散到了三個文件中去控制，增加了開發和維護成本
②選擇符前綴法
原理是在CSS選擇符前加一些只有特定浏覽器才能識別的前綴，從而讓某些樣式只能在特定浏覽器生效。例如 "*html"前綴只對IE6生效，『*+html』前綴只對IE7生效
選擇前綴法不能用於內聯樣式表；在向後兼容性存在一點風險
<style type="text/CSS">
.test{width:80px;}
*html .test{width:60px}
*+html .test{width:70px}
</style>
③樣式屬性前綴法
在樣式的屬性名前加前綴，只在特定浏覽器下生效。例如『_』只在IE6下生效，『*』在IE 6和IE 7下生效
相比選擇符前綴法聚合程度更高，代碼更精簡，可維護性很強，但在向後兼容上存在風險；
可以用在內聯樣式上
<style type="text/CSS">
.test{width:80px;*width:70px;_width:60px}
</style>
6.4解決超鏈接訪問後hover樣式不出現的問題
關於a標簽的四種狀態排序問題，有個love hate原則，即l(link)ov(visited)e h(hover)a(activate)te
6.5 hasLayout
hasLayout是IE浏覽器專有的一個屬性，用於CSS的解析引擎。有些時候IE下一些復雜的CSS設置解析起來會出現bug，原因可能與hasLayout沒有被自動觸發有關，我們可以手動觸發來解決bug
zoom是最常用、最安全、成本最小的觸發hasLayout的方式；在『zoom：1』無效的情況下，可以通過設置『position:relative』來觸發hasLayout
6.6塊級元素 和 行內元素的區別
常見的塊級元素有div、p、form、ul、ol、li等，塊級元素會獨占一行，默認情況下，其寬度自動填滿其父元素寬度；塊級元素可以設置width、height屬性；塊級元素可以設置margin、padding屬性
常見的行內元素有span、strong、em等；行內元素不會獨占一行，相鄰的行內元素會排列在同一行裡，知道一行排不下，才會換行；行內元素設置width、height屬性無效；行內元素設置有問題，具體是：水平方向的padding-left/right,marigin-left/right都會產生邊距效果，但豎直方向的padding-top/bottom,margin-top/bottom卻不會產生邊距效果
塊級元素和行內元素的CSS相關屬性是display，其中塊級元素對應於display:bolck;行內元素對應於display:inline
6.7 display:inline-block和hasLayout
6.8 relative、absolute、float
6.9 居中
6.9.1、水平居中
①文本、圖片等行內元素的水平居中
text-align:center
②確定寬度的塊級元素的水平居中
通過設置margin-left:auto和margin-right:auto來實現
③不確定寬度的塊級元素的水平居中
方法1：table標簽結合margin-left:auto和margin-right:auto來實現
方法2：改變塊級元素的display為inline類型，然後使用text-align:center來實現
方法3:給父元素設置float，然後父元素設置postion:relative和left：50%；子元素設置postion:relative和left：-50%來實現水平居中
6.9.2、垂直居中
①父元素高度不確定的文本、圖片、塊級元素的豎直居中
給父容器設置相同的上下邊距來實現
②父元素高度確定的單行文本的豎直居中
通過給父元素設置line-height和height的屬性為同一個值來實現
③父元素高度確定的多行文本、圖片、塊級元素的豎直居中
方法1：table（td的vertical-align默認是middle）
方法2：對支持display:table-cell的IE8 和 FireFox用display：table-cell和vertical-align：middle來實現居中；對不支持display：table-cell的IE6和IE7，設置positon來實現
6.9.10 網格布局