前端面试题总结整理，css第四篇

1.CSS样式导入的方式有哪些？

• link:

<link href="index.css" rel="stylesheet">

• import:

<style type="text/css">
@import "index.css";
</style>

虽然都可以引入样式，但是也是有相异之处的:
1）link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
2）link属于XHTML标签，无兼容问题的，而@import是在CSS2.1提出来的，低版本浏览器不兼容的。
2）link引入CSS样式时，在页面下载时就开始加载了；而@import需要在页面完全下载后才开始加载（这样会导致加载CSS页面的时候开始没有样式，会造成闪烁）
3）link支持使用JS控制DOM去改变样式；而@import不支持的。
补充：@import的最优写法：

@import url(style.css)

2. ::before和:before的区别?

• 其实也区别不大的，相同之处都是伪类对象，写法上时等效的。
• 不同之处呢就是 ，::before是在CSS2的写法，而:before是在CSS3提出来的！
  :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

3. 为什么要初始化样式？

• 因为浏览器的兼容问题，有的标签在不同的浏览器下默认的值时不一样的，这样如果不初始化的话就会导致浏览器之间的页面差异的。
  但是呢，初始化的样式对SEO会有一定的影响的，所以力求影响最小的情况下初始化的
• 附上淘宝的初始化代码:

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; }  
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }  
h1, h2, h3, h4, h5, h6{ font-size:100%; }  
address, cite, dfn, em, var { font-style:normal; }  
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }  
small{ font-size:12px; }  
ul, ol { list-style:none; }  
a { text-decoration:none; }  
a:hover { text-decoration:underline; }  
sup { vertical-align:text-top; }  
sub{ vertical-align:text-bottom; }  
legend { color:#000; }  
fieldset, img { border:0; }  
button, input, select, textarea { font-size:100%; }