前端面试题之css

1.请列出几个具有继承特性的css属性

　　font-family font-size color line-height text-align text-indent

2.阐述display:none和visibility:hidden的区别

　　display:none隐藏元素，元素在文档布局中不占空间，不能设置元素的高度。

　　visibility:hidden隐藏元素，元素在文档布局中仍保留空间，能设置元素的高度。

3.请列出display属性常用值，并说明其作用

　　display:block; 使元素显示；使元素转换为块级元素

　　display:none;使元素隐藏

　　display:inline-block;使元素同时具有块级元素和行内元素的特性

　　display:inline;使元素转换为行内元素

4.在页面重构时，为什么要先重置css样式？

　　因为浏览器的兼容不同，不同浏览器对有些标签的默认值是不一样的，如果不先重置css样式，同一页面在不同浏览器间会出现显示差异。

5.请列举几个css3新属性

　　圆角属性：border-radius；边框阴影：box-shadow；文字阴影：text-shadow；线性渐变：gradient；旋转：transform；过渡：transition；盒模型：box-sizing

6.请简述sprites原理，并说明使用到了哪些css属性

sprites原理：

　　将项目的一些背景图整合成一张图片，减少http请求。（http请求虽然可以并发，但是有限制，一般浏览器是6个）

使用到的css属性：

　　background-image/background-repeat/background-position

7.float浮动后，为何要清除浮动？

　　 浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局，只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动变高来适应浮动框高度（“高度塌陷”现象）。

8.简述box-sizing的值及其作用

　　box-sizing: content-box|border-box|inherit

　　content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

　　border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

　　inherid：规定从父元素继承border-sizing属性