01

1.結(jié)構(gòu)層：負(fù)責(zé)語義表達(dá)，解決頁面內(nèi)容是什么問題

2.表示層：由css負(fù)責(zé)創(chuàng)建，解決頁面如何顯示內(nèi)容

3.行為層：由腳本負(fù)責(zé)（js），解決頁面上內(nèi)容應(yīng)該如何對事件做出反應(yīng)

02

主流瀏覽器內(nèi)核

1、IE： Trident內(nèi)核

2、Mozilla FireFox: Gecko內(nèi)核

3、Chrome,Safari:Webkit內(nèi)核

4、Opera:Presto內(nèi)核

03

瀏覽器兼容性有哪些

1、瀏覽器默認(rèn)的margin和padding不同，加全局*{margin：0；padding：0}來統(tǒng)一

2、IE6雙邊劇BUG：

塊屬性標(biāo)簽float后，有有橫的margin情況下，在ie6顯示margin比設(shè)置的大；

可以加上display：inline；

3、在IE6，ie7元素高度超出自己設(shè)置高度，是IE8以前的瀏覽器會給元素設(shè)置默認(rèn)的行高導(dǎo)致的。

解決可以加上 overflow：hidden 或者是 line-height：；font-size：；

4、min-height：在IE6下不起作用。

解決方案是height：auto；！important;height:xxpx;

其中xx就是min-height設(shè)置的值

5、透明性IE用filter：

Alpha（opacity=60），而其他主流瀏覽器用opacity：0.6；

6、a(有href屬性)標(biāo)簽嵌套下的img標(biāo)簽，在IE會帶有邊框；解決a img{border：none；}樣式。

7、input邊框問題。

去掉input邊框一般用border：none就可以

8、父子標(biāo)簽間用margin的問題，表現(xiàn)在有時除IE外的瀏覽器子標(biāo)簽margin轉(zhuǎn)移到了父標(biāo)簽上，IE下沒轉(zhuǎn)移。

建議父子標(biāo)簽間的間隔用padding，兄弟標(biāo)簽間用margin。

04

盒子模型

css網(wǎng)頁設(shè)計中的每個元素都是長方形的盒子。

width（offsetWidth）：width+padding+border

height（offsetHeight）：height+padding+border