CSS常见样式【下】

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

text-align:center规定行内元素相对于父元素居中对齐，样式写在父元素上，作用在行内元素上。

2.IE盒模型和W3C盒模型有什么区别？

IE盒模型的宽度和高度=内边距(margin)+边框(border)+内边距(padding)+内容(content)
W3C标准盒模型的宽高度就是内容(content)的宽高度

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

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

4.line-height: 2和line-height: 200%有什么区别？

line-height: 2表示占据的行高是本身文字高度的2倍
line-height: 200% 表示占据的高度是父容器(父元素)文字高度的2倍
line-height属性为数字时，根据子元素字体大小动态计算出行高值让子元素继承；当属性为百分数时，根据父元素的字体大小先计算出行高值然后在让子元素继承。

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

inline-block的特性：即呈现inline特性(不占据一整行，宽度由内容宽度决定)，又呈现block特性(可设置宽高，内外边距)
去除缝隙：(1)前后两个标签中间的空隙去掉，显示成一行；
(2)用div包裹，设置font-size: 0;在需要设置字体的地方设置需要的字体大小
高度不一样的inline-block顶端对齐设置vertical-align: top;

6.CSS sprite是什么？

CSS 雪碧图或精灵图，将不同的图片/图标合并在一张图上。
使用CSS sprite可以减少网络请求，提高网页加载性能。

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

display: none; 消失，不占用位置
visibility: hidden; 和opacity: 0;类似
opacity: 0; 透明度为0，整体
background-color: rgba(0,0,0,0) 只是背景色透明

代码实现

代码1
代码2