CSS基础（四）

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

用于行内元素水平居中。

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

IE盒模型：设置宽（高）时，内容宽（高）+padding+border=width（height）
W3C盒模型：设置宽（高）时，内容宽（高）=width（height）

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

box-sizing: content-box;：W3C标准盒模型。
box-sizing: border-box;："IE盒模型",设置padding和border时不会额外增加宽高。

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

line-height: 2;：相对于自身字体大小的两倍。不会出现字体重叠。
line-height: 200%;：相对于父元素字体大小的两倍。可能会出现字体重叠。

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

设置了inline-block后，该元素不会独占一行，但是又可以设置元素宽高、内外边距。

去除缝隙：

两个设置了inline-block的元素间去掉空白符如回车和空格。即可去掉两个元素间的间隙。但是去除回车后代码的阅读性下降了。所以可以通过一下几种方式即消除：

1. 父元素设置：font-size: 0;再在设置了inline-block的元素新设置一个font-size。
2. 使用注释

1
2
3

3. 标签换行

1
2
3

inline-block顶端、基线、中心线对齐：

vertical-align: top;：顶端对齐。
vertical-align: bottom;：基线对齐。
vertical-align: meddle;： 中心线（垂直居中）对齐。

CSS sprite 是什么?

CSS sprite也称为雪碧图，将一个页面中多个小图标集中在一张图上。可以减少网络请求。提高网页加载性能。

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

• opacity: 0; 整体透明度为 0，元素依旧在文档流中。
• visibility: hidden; 与opacity一样。
• background-color: rgba(0, 0, 0, 0.2); 元素透明，依旧在文档流中。
• display: none 元素隐藏，不再在文档流中。