1. 標準盒模型
box-sizing
2. font縮寫
要少用,因爲一旦定義,如果沒寫全,就會有繼承的問題
正確的順序是:
font:是否斜體 字體粗細 字體大小/行高
字體樣式
例子:
font: italic bold 12px/18px Arial, Helvetica, sans-serif ;
當然最常用的是下面的寫法:
font: bold 12px/18px Arial;
3. 浮動
浮動的原理是用inline元素包裹block元素讓之水平展示
沒有基於表格的可訪問性問題,維護問題以及性能問題.
但可能會造成內容的缺失,是IE的margin bug的罪魁禍首
儘管flexbox已經出現了,但離拋棄浮動還有很長的距離(兼容性還不太好,就是平分的意思)
流體佈局纔是王道
4. 私有前綴
5. id和樣式同流
id跟腳本掛鉤
6. vertical-align
兼容性差,用處不大
7. 垂直方向margin重疊
產生的原理的解決辦法參考另外一篇文章
8. width 100%
CSS中的百分比通常相對於其他CSS設置(例如父元素)。width:100%確實字面顯示的含義,不是填滿100%剩餘空間,而是100%所有空間,包括margin和padding的設置。
9. borer-image(不會用)
10. css計數器(不會用)
IE6和7不支持
11. css註釋
12. 雙冒號僞類(做一些優化顯示)