01
1.結構層：負責語義表達，解決頁面內容是什么問題
2.表示層：由css負責創建，解決頁面如何顯示內容
3.行為層：由腳本負責（js），解決頁面上內容應該如何對事件做出反應
02
主流瀏覽器內核
1、IE： Trident內核
2、Mozilla FireFox: Gecko內核
3、Chrome,Safari:Webkit內核
4、Opera:Presto內核
03
瀏覽器兼容性有哪些
1、瀏覽器默認的margin和padding不同，加全局*{margin：0；padding：0}來統一
2、IE6雙邊劇BUG：
塊屬性標簽float后，有有橫的margin情況下，在ie6顯示margin比設置的大；
可以加上display：inline；
3、在IE6，ie7元素高度超出自己設置高度，是IE8以前的瀏覽器會給元素設置默認的行高導致的。
解決可以加上 overflow：hidden 或者是 line-height：；font-size：；
4、min-height：在IE6下不起作用。
解決方案是height：auto；！important;height:xxpx;
其中xx就是min-height設置的值
5、透明性IE用filter：
Alpha（opacity=60），而其他主流瀏覽器用opacity：0.6；
6、a(有href屬性)標簽嵌套下的img標簽，在IE會帶有邊框；解決a img{border：none；}樣式。
7、input邊框問題。
去掉input邊框一般用border：none就可以
8、父子標簽間用margin的問題，表現在有時除IE外的瀏覽器子標簽margin轉移到了父標簽上，IE下沒轉移。
建議父子標簽間的間隔用padding，兄弟標簽間用margin。
04
盒子模型
css網頁設計中的每個元素都是長方形的盒子。
width（offsetWidth）：width+padding+border
height（offsetHeight）：height+padding+border
