CSS样式

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

作用：使得行内元素水平居中。
demo

IE 盒模型和W3C盒模型有什么区别?

W3C盒模型：是指在严格模式下的盒子模型，width只表示content的宽度，border与padding、margin不算在其内。

image.png

chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度

image.png

IE 盒模型：是指在混乱模式下的盒子模型，width表示内容与边框的宽度，内边距外边距不算在其内。

image.png

ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度

image.png

*{ box-sizing: border-box;}的作用是什么？

作用：box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width），如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）

line-height: 2和line-height: 200%有什么区别?

line-height: 2：使指定文本元素呈现行间距离（行高）为当前文本大小的两倍 。
line-height: 200%：使指定文本元素的行高为其父元素的两倍。
demo

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

特性：1.既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
2.又呈现 block 特性 (可设置宽高，内外边距)

去除缝隙：

1. 去除行内元素间的空白字符。
2. 设置字符font-size：0；然后再需要呈现的文本元素再设置字符大小。
   demo

顶端对齐：
使用：vertical-align:bottom;
demo

CSS sprite 是什么?

CSSSprites，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，只需要加载一张图片（发出一个请求）即可。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以对于用户是没有影响。但是发出多个请求对于服务器还是有一定压力的。

让一个元素"看不见"有几种方式？有什么区别?

1. opacity：0；整体透明度为零
2. visibility：hidden：和opacity类似
3. display：none；消失，不占用位置
4. background-color：rgba（0，0，0，0.2）；设置背景色透明

编程：

1. demo
2. demo

参考答案