css常见样式2

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

text-align:center是让行内文本水平居中;作用在块状元素的文字和Img上以及display为inline或inline-block的容器上；让内联元素在父级块状元素中居中。

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

W3C盒模型

Paste_Image.png

IE盒模型

Paste_Image.png

W3C盒模型的宽高等于填充物的宽高，IE盒模型的宽高包括border和padding。

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

指定所有元素都为IE盒模型。width = border + padding + 内容的 width；
height = border + padding + 内容的 height。

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

line-height:2是相对本身文字高度的2倍，line-height：200%是相对父元素文字高度的2倍。

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

即呈现inline特性（不占据一整行，宽度由内容宽度决定）又呈现block特性（可设置宽高，内外边距）；
去除缝隙（有空白字符产生缝隙）：
1.把空白字符的字体设置为0；
2.把行内元素挤在一起可以去掉空白。
设置vertical-align:top可以顶端对齐

6.CSS sprite 是什么?

css sprite是将不同图片或图标合并在一张图上，然后利用css的background属性定位背景图位置。
优点：可以减少网络请求，提高网页加载性能；
缺点：维护的时候比较麻烦，需要改动的时候整张图都得改。

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

opacity：0；设置透明度为0，占据位置；
display：none;不占据位置；
visiblity：hidden；和opacity：0类似；
background-color：rgba(0,0,0,0)设置背景色透明；