CSS盒模型相关

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

text-align描述内联内容在父元素中的对齐方式，center的作用是让行内元素居中显示。

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

W3C盒模型 IE盒模型

• 区别：显而易见，W3C标准中padding、border所占的空间不在width、height范围内，width指标是content的宽度，而IE的盒模型width包括content＋padding＋border。

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

box-sizing是CSS3的新属性，允许以特定方式定义匹配某个区域的特定元素。
通常一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width），如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin），告诉浏览器计算width和height属性时，包含 border和 padding的大小。

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

• line-height:2 指定文本元素的行间距为当前文本高度的二倍
• line-height:200%是指父文本高度的二倍。

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

1. display:inline-block：行内元素可以像块级元素一样设置宽高、padding、margin、border，但不占一整行，后面可接其他元素。
2. 元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。
   将父元素字体大小设置为0，行内元素单独设置字体大小，就可以去除缝隙。
   取消标签闭合。
3. 顶端对齐：vertical-align：top

CSS sprite 是什么?

CSS sprite是CSS精灵图，最初有人称其为雪碧图。它可以合并小图标，通过设置background-position来显示不同的图标。这种方式减少了服务器的请求次数，节省流量，提高了加载速度。

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

1. display：none 让元素消失，不占据位置
2. opacity：0 设置元素透明度为0，但还占据位置，针对整体
3. visibility:hidden 和opacity相似
4. background-color:rgba(0,0,0,0,0.1)设置背景色透明度