CSS常见样式2

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

text-align可以使文本居中对齐，作用在块级元素上，如果是给父元素是块级元素的元素设置text-align:center,可以使包裹在父元素里的行内元素水平居中。

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

• W3C盒模型：

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

• IE盒模型

IE盒模型的计算方式和W3C的很相似，但有一点是非常不同的，这就是：填充和边框并不被包含在计算的范围内。

总宽度 = margin-left + width + margin-right

这就意味着一旦元素拥有横向的填充和/或边框，实际的内容区域（content area ）就要扩大来创造出他们占据的空间。

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

作用是为元素设定的任何内边距及边框均在设定的宽度和高度中进行绘制，即设置为了IE盒模型。如果是box-sizing: content-box就是w3c盒模型。另外box-sizing: content-box即是把当前模型设置为“标准盒模型”（图一所示）。

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

line-height:2表示的是行高是本身字体像素的2倍。
line-height:200%表示的是行高是父容器行高的2倍。

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

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

去除间隙可以在html中把产生间隙的两标签挤在一起，不留空格；也可以在css中在父元素外设置font-size：0；，然后再再子元素中单独把字体设置回去。

达到顶端对齐，可以给inline-block元素添加vertical-align:top

6、CSS sprite 是什么?

css 雪碧图或精灵图。用一张.png格式图片来放置所有的小图标，然后引用这一张图片，设置background-position来显示不同的图标。这样可以减少向服务器的请求数量，提高加载速度。

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

• display：none;
  将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。

• visibility:hidden
  和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。适用于那些元素隐藏后不希望页面布局会发生变化的场景。

• opacity:0
  这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。

• background-color：rgba（0，0，0，0）；raga(0, 0, 0, 0) raga 是代表 Red(红色)、Green(绿色)、Blue(蓝色)和 Alpha，Alpha代表透明度，raga(0, 0, 0, 0)表示背景色完全透明。