Web前端面试指导(十六):为什么要初始化CSS样式?

时间:2024-03-21 11:36:02

题目点评

这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式。这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了

初始化样式的原因

因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异。

  1. <h1>标题1标签在不同浏览器的盒子模型</h1>
Web前端面试指导(十六):为什么要初始化CSS样式? Web前端面试指导(十六):为什么要初始化CSS样式?
  火狐浏览器 谷歌浏览器
Web前端面试指导(十六):为什么要初始化CSS样式? Web前端面试指导(十六):为什么要初始化CSS样式?
IE7浏览器 IE9浏览器


从上面可以看出,同一个标签,不同的浏览器解析的数据是不一样的,这样就会导致显示的差异了。


弊端

初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

淘宝初始化代码

  1. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  2. body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  3. h1, h2, h3, h4, h5, h6{ font-size:100%; }
  4. address, cite, dfn, em, var { font-style:normal; }
  5. code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  6. small{ font-size:12px; }
  7. ul, ol { list-style:none; }
  8. a { text-decoration:none; }
  9. a:hover { text-decoration:underline; }
  10. sup { vertical-align:text-top; }
  11. sub{ vertical-align:text-bottom; }
  12. legend { color:#000; }
  13. fieldset, img { border:0; }
  14. button, input, select, textarea { font-size:100%; }
--------------------------------------------------------------------------------------------------------------------