web前端面试2（css）

1 css sprite（精灵图，雪花图）
将多个图片拼接到一个图片中，通过background-position和元素尺寸调节背景图
优点：减少http请求次数，提高加载速度，
修改方便，只要在一张图片上修改颜色或者深浅。
缺点：需要修改图片大小时，或者调整时，需要全局考虑。

2.display：none和visibility：hidden区别。
相同：使得元素不可见。
区别：display：none会让元素从渲染树中消失，不占任何空间。后者反之，会占领空间，只是不可见；display：none是非继承属性，子孙节点消失是由于元素从渲染树种消失造成的，通过修改子孙节点属性无法显示。后者是继承属性，但是可以通过设置子孙节点visibility：visible显示出来；修改display通常会造成文档重排，修改visibility只会造成本元素的重绘；读屏器不会读取display：none的内容，后者会被读取。

3.link和@import的区别。

4.fouc：flash of UNstyled content 页面闪烁。

5.bfc

决定了元素如何对其内容进行定位，以及其他元素的关系和相互作用。

6.display,float,position的关系

7.清除浮动的方式。
使用空标签，clear both（增加了无意义的标签）
overflow：auto （zoom:1兼容ie，可能出现滚动条）
after伪元素清除浮动。（ie8以上和非ie支持）大网站都是这么使用的。

8.初始化css样式？
浏览器兼容问题，可能内外边距存在差异

9.c3新特性
css选择器 圆角border-radius 多列布局 阴影和反射 文字特效text-shadow 线性渐变 旋转transform
新增的伪类：p:first-of-type p:last-of-type p:only-of-type p:only-child p:nth-child(2) :after :before :enabled :disabled :checked

10.display的值？
block：
none：
inline-block：
list-itme：
table：
inherit：

11.css盒模型
ie盒子模型，w3c盒子模型。
content padding margin border

ie的content部分吧border和padding计算进去了。

12.css优先级，权重。
!important》id》class》tag标签

13.理解浮动和清除浮动
浮动的框可以向左和向右移动，直到他的外边缘碰到包含一个浮动框的边框为止。由于浮动框不存在文档的普通流忠，所以就会漂浮在普通文档流的上。

14.定位理解。
absolute：生成绝对定位的元素，脱离文档流，相对于父元素定位。
fixed：同上，相对于浏览器定位。
relative：生成相对定位，不脱离文档流，相对于本身定位。‘
static：默认定位。
inherit：继承父级的属性。

15.display：inline-block；不出现间隙
移除空格
使用margin负值
使用font-size：0
letter-spacing
word-spacing

16.git jpeg png 区别
git：8位像素，256色素，无损压缩，支持动画，支持Boolean透明
jpeg：颜色限于256，有损压缩，不支持透明，适合照片
png：类似gif，颜色上线256，文件小，支持alpha透明度，无动画，
svg：矢量图，放大不失真。