cSS部分面试题

一、css sprite是什么,有什么优缺点

1、概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

2、优点：

（1）减少HTTP请求数，极大地提高页面加载速度。

（2）增加图片信息重复度，提高压缩比，减少图片大小。

（3）更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。

3、缺点：

（1）图片合并麻烦。

（2）维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

二、display: none;与visibility: hidden;的区别

visibility:隐藏对应的元素但不挤占该元素原来的空间。 display:隐藏对应的元素并且挤占该元素原来的空间。

两者区别：

1. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2. visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3. visibility用来设置元素的可见状态。

4. display:none是会有回流，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

5. visibility: hidden; 不会有回流，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

三、link与@import的区别

1、老祖宗的差别，link属于XHTML标签，而@import完全是css提供的一种方式。

　 link标签除了可以加载css外，还可以做很多其他的事情，@import只能加载CSS。

2、加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。

3、兼容性的差别：@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

四、什么是FOUC?如何避免

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC.

原因大致为：

1，使用import方法导入样式表。

2，将样式表放在页面底部

3，有几个样式表，放在html结构的不同位置。

其实原理很清楚：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂 的 花屏现象。

解决方法：使用link标签将样式表放在文档head中。

五,display ,float,position 的关系

三个属性 display属性规定元素生成框的类型。较为常见的有none-缺省值（用于隐藏元素，元素会消失于视界和文档流中），block-块级元素，inline-block-行内块级元素，list-item列表样式块级元素……….（display种类很多，可查阅资料CSS display 属性）