当前位置: 首页 > Web前端 > HTML

前端开发-浏览器默认样式和css初始化

时间:2023-04-02 15:29:55 HTML

为什么要初始化css?资深建站人都知道,这是要考虑浏览器兼容性问题。事实上,不同的浏览器对于一些标签的默认值是不同的。如果CSS未初始化,浏览器之间的页面差异往往会发生。当然,初始化样式会对SEO产生一定的影响,但不能两者兼有,而是尽量以影响最小的方式进行初始化。相信很多人都经历过太多次了。有时在布局网页时,不知道为什么设置的网页边距总是达不到预期的效果。比如我在这个属性里设置了60px,结果变成了92px。检查了所有的属性,原来是浏览器默认添加的。再来看看为什么我在加float之前是正常的。加上float后,就变得不正常了。在这里,我也没有添加margin属性。原来是加了float,让它脱离了文档流。然后,浏览器默认添加了margin-top:16px和margin-bottom:16px;那么60+16+16=92;当然类似的问题还有很多,下面是一些网站默认的css属性http://www.iecss.com/那么,如何解决这个问题呢?您可以添加*{margin:0;padding:0;}到css,很多人也是这样写的。这个确实很简单,但是有人会有疑问:像*这样的通用字符,写代码的时候速度很快,但是如果网站很大,css样式表文件很大,这样写的话,会把所有将标签初始化一次,会大大增加网站的负载,网站加载时间会很长。还有就是添加可能用到的属性值。这里参考雅虎工程师提供的CSS初始化示例代码body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5。h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;填充:0;}正文{背景:#fff;颜色:#555;字体大小:14px;字体系列:Verdana、Arial、Helvetica、sans-serif;}td,th,caption{字体大小:14px;}h1,h2,h3,h4,h5,h6{字体粗细:正常;字体大小:100%;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;字体粗细:正常;}a{颜色:#555;文字装饰:无;}a:hover{文字装饰:下划线;}img{边框:无;}ol,ul,li{列表样式:无;}input,textarea,select,button{font:14pxVerdana,Helvetica,Arial,sans-serif;}表{边框折叠:折叠;}html{overflow-y:scroll;}.clearfix:after{content:".";显示:块;高度:0;清除:两者;可见性:隐藏;}.clearfix{*缩放:1;然后,每次写css前加上这个,这样就不用担心出什么问题了。