CSS样式层叠表
1、link与@import的区别（5点）
（1）、link为XHTML的标签，可以引进CSS样式表，除了引进CSS文件还可以引进其他的文件如.js或.rss文件;@import为CSS中的标签，只能引进CSS文件。
（2）、加载顺序不同：link引进的CSS时同时也被加载，而@import引进的CSS要下载完才加载。
（3）、兼容性问题：@import是CSS2.1才出来的不被老的浏览器支持，而link没有此问题。
（4）、使用JavaScript操作DOM改变样式只能由link引进CSS文件才能实现。
（5）、@import可在CSS内再次引进CSS其他文件
<link src="xx.css" rel="styleSheet" type="text/css">
<style>
@import xx.css;
</style>
2、display和visibility的区别
（1）、display：none;是元素没有框，即是没有宽高，不占文档的位置；
display：inline;可以使像<p>这样的块级元素变为像<a>一样的行内元素
display：block;可以使像<a>一样的行内元素变为像<p>一样的块级元素
display：inline-block；行内块元素
（2）、visibility：hidden；不显示，透明，但是有宽高，在文档中占有位置，只是隐藏
3、定位机制
除了默认的流定位方式，还有：浮动定位，相对定位，绝对定位，和固定定位
浮动定位：将元素排除在普通流之外，将它放置到边框的左边或右边
相对定位：将元素相对于普通流中的位置定位
绝对定位：将元素内容完全从普通流中完全移除，可以偏移属性在固定元素的位置
固定定位：将元素固定在页面的一个某个位置
4、标签语义化
在HTML5的新标签，开始了标签语义化，直观的认识标签和属性的用途和作用。如<header>、<aside>、<footer>
语义化可让页面显得结构化，便于浏览器解析，便于引擎搜索解析，并提高代码的可读性，可维护性和可重用性。
5、为什么简易设置背景图片时，需要设置背景颜色？
一般我们在设置background-image时都会设置background-color，并设置与图片相应的颜色。如果在加载页面的，突发状况，图片无法显示，页面可以使用背景颜色充当。
6、CSS中content的作用
content属性与：before和：after伪元素配合使用来插入生成的内容，在元素之前或者元素之后，可以插入文本、图像、引号及计数器生成的编号
eg、body{counter-reset:chapter}
h1:before{content:"第"chapter(chapter)"章"}
h1{counter-increment:chaptr}
7、CSS sprite是什么，优缺点？
CSS精灵，是一种网页图片应用处理方式，把网页中的一些背景图片整合在一张图片文件中，在利用background-image、background-repeat、background-position组合进行背景定位。
优点：（1）、减少HTTP请求，提高性能
（2）、减少图片字节
（3）、减少命名困扰
（4）、更换风格方便
缺点：图片合成麻烦，设置时必须精确定位，维护时最好是添加图片，不更改已有的图片
8、过渡与动画的区别
过渡属性transition可以在一定时间内实现元素的状态过渡到另一个状态，模拟动画效果，但功能有限。而动画属性animation则可以实现比较复杂的动画，通过关键帧控制动画的每一步控制更为精准，可以实现复杂动画。
9、CSS reset
CSS reset叫CSS重写或CSS重置
用于改写HTML标签的默认样式，如p元素有上下边距，li 有列表标识符。这些默认样式在不同的浏览器会有不同的效果，如ul默认有缩进的样式，在IE中使用margin实现，在Firefox中是用padding实现，这必然会有兼容性问题。
因此在CSS样式中去掉这些默认样式，重新定义标签样式覆盖默认样式，即为CSS reset。
注意，样式重写不建议用*{}来重置，影响性能
p,b,ul{margin:0;padding:0}
10、浏览器兼容性
由于浏览器的版本及类型不同导致CSS的样式也不尽相同因此需要考虑到浏览器的兼容性书写不同的CSS样式。
首先，各主流的浏览器对W3C的标准支持较好，所以要保证代码符合W3C的标准。
其次，对于某些支持受限的属性，针对不同的浏览器添加不同的前缀，如-webkit- -o- -moz-.
还有，对于IE的低版本可带前缀书写特定的代码，实现版本识别
eg .bg{
background-color:#333;/*所有都能识别*/
*background-color:#00deff9;/*IE 6 7 8能识别*/
+background-color:#a200ff;/*IE6 7能识别*/
_background-color:#l10bd1;/*IE6*/
}
另外，特殊情况特殊处理
（1）CSS reset改变默认的样式效果
（2）IE低版本中auto不能实现居中，用text-align
（3）子元素设置外边距时，父元素设置外边距或border
（4）外边距合并问题
最后的*清除浮动元素带来的影响*
由于浮动的元素不在文档的普通流中，所以元素浮动之后其原有的位置不在保留，其他的元素位置也会受到影响。
（1）清除左右带来的浮动影响，用clear属性来设置，如果在包含框内，是父元素显示其宽高使用overflow:hidden来设置。
推荐方法（2）父元素添加后置内容生成
parent：after{
content:" ";
display:table;
clear:both;
}
还有我们经常遇到的小问题，
margin-top是不是把父元素也带下来了呢？第一个子元素的margin-top与最后一个子元素的margin-bottom的越界问题
解决（1）、给父元素加border
（2）、给父元素加padding
（3）、给父元素加overflow：hidden；
（4）、推荐方法：为父元素添加前置内容生成
.parent:before{
ｃｏｎｔｅｎｔ：＂＂；
ｄｉｓｐｌａｙ：ｔａｂｌｅ；
}