CSS 15道面试题

1、CSS盒模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

对不同部分的说明：

内容区（content）：它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型；

内边距（padding）：内边距是内容区和边框之间的空间；

边框（border）：边框是环绕内容区和填充的边界；

外边距（margin）：外边距位于盒子的最外围，是添加在边框外周围的空间。

2、什么是z-index？

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：z-index 仅能在定位元素上奏效！

可能到值：

auto——默认。堆叠顺序与父元素相等。

number——设置元素的堆叠顺序。

inherit——规定应该从父元素继承 z-index 属性的值。

3、什么是CSS Sprite（“精灵图”）

CSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。

再利用CSS的"background-image"，“background-repeat”，"background-position"的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

4、使用CSS Sprites的好处

利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；