盒模型

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

• 属性规定元素中的文本的水平对齐方式。

• text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。

• 能让行内元素水平居中。

2.IE 盒模型和W3C盒模型有什么区别?
W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border。

3.*{ box-sizing: border-box;}的作用是什么？
box-sizing:border-box“IE盒模型”就是box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。也就是说元素的宽度/高度等于元素内容的宽度/高度。改动 border 与 padding 的值，都不会导致 box 总尺寸发生变化，也就不会打乱页面整体布局。

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

• line-height: 200% 基于当前字体尺寸的百分比行间距。父元素计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

• line-height: 2 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。即行间距为当前字体尺寸的两倍，子元素根据自己的font-size计算子自己的line-height。

5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)，又呈现 block 特性 (可设置宽高，内外边距)。
去除缝隙：
1.设置父元素字体大小为0，行内元素单独设置字体大小；
2.删除标签间的空格；
3.display：block，然后让元素浮动。
设置vertical-align: top;让顶端对齐。

6.CSS sprite 是什么?
CSS精灵图，是一种网页图片应用处理方式。
优点：利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。
缺点：不能改动，不易修改。

7.让一个元素"看不见"有几种方式？有什么区别?
方法一：opacity: 0 ; 透明度为0，整体，元素隐藏后依旧占据着空间。
方法二：visibility: hidden ; 和opacity:0 类似，适用于那些元素隐藏后不希望页面布局会发生变化的场景。
方法三：display:none; 消失，不占用位置，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
方法四：background-color: rgba(0，0，0，0.2) 只是背景色透明。

代码1
代码2