CSS常见样式2

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

text-align:center；

text-align用在块级元素上，对里面的行内元素生效
text-align：center 会使得行内元素居中

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

如图：

iehemoxing.JPG bzhemoxing.JPG

IE盒模型的width和height所描述的内容content包含padding和border；
标准盒模型的width和height所描述的内容content不包含padding和border。

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

*{box-sizing: border-box;} 是CSS3的新样式，用来声明浏览器用IE盒模型进行解析CSS代码。

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

line-height: 2 设置文本的行高为2倍本身大小的高度；
line-height: 200% 设置文本的行高为父元素文字的高度的2倍。

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

inline-block 用于将行内元素(inline level)展示为inline-block模式，其特性：

1. 具有行内元素的特性，不占据整行；
2. 具有块级元素的特性， 可以设置宽高（height & width）

inline-block模式去除缝隙方式：

1. 去除行内元素标签之间的空格和换行
2. 通过CSS设置父容器的font-size:0，再通过.box类选择器将font-size设置成原值

1.png 2.png 3.png

高度不一样的inline-block元素设置顶端对齐：

1.png 2.png

6. CSS sprite 是什么?

CSS Sprite即CSS 精灵图（民间俗称雪碧图），是将很多小图合并成一张大图，来实现减少HTTP请求的目的，通过CSS里的background-position属性进行偏移，来实现适时显示正确的图片。

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

让一个元素“看不见”有4种方式：

1. visibility: hidden;
2. opacity: 0;
3. display: none;
4. background-color: rgba(0,0,0,0.2);

其中：
visibility:hidden;保留元素空间，只是在页面上不显示
opacity:0 和 visibility:hidden类似
display:none; 浏览器不再绘制，不占据空间
background-color:rgba(0,0,0,0.2); 只针对背景色，用来设置背景透明