CSS样式初始化

不同浏览器对各个元素的margin，padding，border，font等属性的定义各有不同，不同浏览器的显示效果可能不一样，为了杜绝这种情况，通过CSS强制让所有元素的属性值都一样。

 

主要需要初始化的样式

 

1.块元素，由于不同浏览器对各个元素的margin，padding，等属性的定义各有不同，为了兼容性的问题，我们需要将块级元素的margin和padding设置为0；

 

例如：

body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;padding: 0;}

 

2.表单元素，对字体的样式进行统一

例如：

body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif}

button,input,select,textarea{font-size:100%;outline:none}

 

3.a标签，将a标签的下划线去掉

例如：

a{text-decoration:none}

a:hover{text-decoration:underline}

 

4.em b等元素进行字体样式改正

例如：

em,b{font-style:normal}

 

5.列表元素，将列表元素的样式去掉

例如：

td,th,ul,ol{padding:0;list-style: none;}

 

6.img元素

 

img{border:0;display: block;}

 

7.table元素

table{border-collapse:collapse;border-spacing:0}

 

 

腾讯qq官网的初始化页面

 

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}

a{color:#2d374b;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

em{font-style:normal}

li{list-style:none}

img{border:0;vertical-align:middle}

table{border-collapse:collapse;border-spacing:0}

p{word-wrap:break-word}