CSS常见样式2

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

作用是使行内元素与文本水平居中；作用在块级元素中，能让行内元素与文本水平居中。

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

W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border。

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

把整个页面的所有元素默认的W3C盒模型标准转化为IE盒模型标准。
box-sizing: content-box：w3c标准盒模型
box-sizing: border-box：“IE盒模型”

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

line-height: 2;，不能被子元素继承，设置为自己文本文字大小的两倍。
line-height: 200%;，能被子元素继承，设置为父容器文本文字大小的两倍。

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

即呈现inline特性（不占据一整行，宽度由内容宽度决定）又呈现block特性（可设置宽高，内外边距）。
去除缝隙：

• 标签之间不使用空格和回车键。
• 在其父元素设置font-size:0;，然后在inline-block元素内恢复font-size。

在inline-block元素中设置vertical-align: top;可以使不同高度的inline-block元素顶端对齐。

CSS sprite 是什么?

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

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

1. display:none;

• 浏览器不会生成属性为display: none;的元素。
• display: none;不占据空间（毕竟都不熏染啦），所以动态改变此属性时会引起重排。
• display: none;不会被子类继承，子类也是不会显示的。
• display,是个尴尬的属性，transition对她无效。

2. visibility: hidden;

• 元素会被隐藏，但是不会消失，依然占据空间。
• visibility: hidden会被子类继承，子类也可以通过显示的设置visibility: visible;来反隐藏。
• visibility: hidden;不会触发该元素已经绑定的事件。
• visibility: hidden;动态修改此属性会引起重绘。
• visibility,transition对它无效。

3. opacity: 0 ;

• opacity: 0 ;只是透明度为100%,元素隐藏，依然占据空间。
• opacity: 0 ;会被子元素继承,且子元素并不能通过opacity:1;进行反隐藏。
• opacity: 0 ;的元素依然能触发已经绑定的事件。
• opacity,transition对它有效。

4. background-color: rgba(0，0，0，0)；

• 只是背景色透明。