css常见样式2

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

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

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

Paste_Image.png

IE盒模型：
css的width=（border+padding）*2+Content
整个盒模型宽=（border+padding）*2+Content+margin*2

** W3C盒模型: **
css的width=Content
整个盒模型宽=Content+（padding+border+margin）*2
高同理。

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

为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

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

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

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

inline-block既有inline的属性又有block的属性，比如行内元素设置成inline-block之后可以是它排在同一行，又可以设置宽高和边距。
排在一行的元素去除缝隙有三种方法：
1.将它们之间的空格去掉，也就是标签紧密排在一起。如：

Paste_Image.png

2.给父容器设置font-size:0；给行内元素单独设置font-size。
3.如果是行内元素，就设置display：block,用浮动也可以去除缝隙。
设置vertical-align:top可以使inline-block元素顶端对齐。

CSS sprite 是什么?

CSS prites在国内很多人叫css精灵，是一种通过CSS技术将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术，借由减少下载图像文件数量，提高网页的显示性能。

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

1.opacity:0 透明度为0，就相当于看不见了
2.visibility：hidden
3.display：none
4.background-color:rgba(0,0,0,.2）只是背景色透明。
1、2、4看不见后还是占有文档流空间。3隐藏之后就不占用文档流了。