css关键基础点

CSS中 link 和@import 的区别是什么？

a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS
b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
d. link方式的样式的权重 高于@import的权重
e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制

position的absolute与fixed共同点与不同点

相同：
a. 改变行内元素的呈现方式，display被置为block
b. 让元素脱离普通流，不占据空间
c. 默认会覆盖到非定位元素上
区别：
a. absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。
b. 当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

position的值， relative和absolute分别是相对于谁进行定位的？

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）
relative：生成相对定位的元素，相对于其在普通流中的位置进行定位
static：默认值。没有定位，元素出现在正常的流中

解释下 CSS sprites原理，优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。
优点：
a. 减少网页的http请求
b. 减少图片的字节
c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
缺点：
a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

经常遇到的浏览器兼容性有哪些？如何解决？

a. 浏览器默认的margin和padding不同
b. IE6双边距bug
c. 在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
d. min-height在IE6下不起作用
e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6
f. input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效

rgba()和opacity的透明效果有什么不同？

a. opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。
b. 设置rgba透明的元素的子元素不会继承透明效果！

清除浮动的方法

a. 设置父元素高度
b. 在末尾添加一个div设置为clear:both;
c. 父元素使用bfc来清除浮动