CSS常见样式（2）
2017-03-16 本文已影响0人
荣_Rong
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
- 作用在行内元素上
- 让文本水平居中
IE 盒模型和W3C盒模型有什么区别?
*{ box-sizing: border-box;}的作用是什么？
设置 box-sizing:border-box 的元素可以使用IE盒模型
默认(设置 box-sizing:content-box 即为W3C盒模型)
line-height: 2和line-height: 200%有什么区别?
line-height: 2——————行高为当前元素字体大小的2倍
line-height: 200%————行高为父容器字体大小的2倍
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
（1）
inline-block 可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。
（2）
（3）
**行内元素以文字底部对齐**
**添加vertical-align:top**
**bottom**
CSS sprite 是什么?
CSS精灵图或雪碧图，是一种通过把需要请求的图片整合为一张图片然后用css获取需要区域的方法。
优点：可以减少对图片请求次数，提高网页加载性能，减少服务器的运算压力。
缺点：图片不能缩放，每次需要新加入图片就要重新做一张整合图。
让一个元素"看不见"有几种方式？有什么区别?
| 方式 | 区别 |
|---|---|
| opacity:0 | 设置整体透明度为0 ， 占空间 |
| display:none | 设置消失，不占空间 |
| visibility:hidden | 设置隐藏，和opacity类似，占空间 |
| background-color:rgba(0,0,0,0) | 设置背景透明度为0 |
使用 CSSsrpite 实现如下效果
代码：http://js.jirengu.com/yetehisexu/1/
