html页面结构

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