1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align:center是规定元素中的文本水平居中，作用于块级元素上，使行内元素水平居中
若元素设置了display:block，则用“margin:xxpx auto;”来设置居中
2.IE盒模型和W3C盒模型有什么区别
image.png
W3C盒模型设置的宽高，是content的宽高，不包含padding和border
image.png
IE盒模型设置的宽高，包含padding和border
3.{ box-sizing: border-box;}的作用是什么？
- content-box 这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框.
在宽度和高度之外绘制元素的内边距和边框。 - border-box 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 - inherit 规定应从父元素继承 box-sizing 属性的值
1 box-sizing: content-box：w3c标准盒模型
2 box-sizing: border-box：“IE盒模型”
4.line-height: 2和line-height: 200%有什么区别?
- line-height设置单行文本的行高
2是本身文字高度2倍，200%是父元素文字高度的两倍 - height = line-heihgt ——垂直居中单行文本
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block既呈现inline的特性，也呈现block的属性
inline：不占据一整行，宽度由内容宽度决定
block：可设置元素宽高、边框
产生缝隙原因是因为HTML里，两个元素之间有空白，换行空格等，都被浏览器当做一个空白字符。
消除方法：
在包裹两个缝隙元素的div中，设置字体大小为0，这样空白字符高度为0；
在各自元素样式中再设置字体大小
设置了inline-block的元素，具有行内元素的特点，是以文字下面的基线来对齐的，可以通过设置vertical-align：top/bottom来调节是在顶部还是底部对齐
6.CSS sprite 是什么?
CSS sprite 是指将众多图标、图片合成到一张图片上，用于网页的图片图标使用的图片。
通过CSS样式，指定图片的宽高位置，可展现出需要的图标和图片。
这种方式的优点在于减少了网络请求，多个图片、图标，只需要进行一次网络请求即可。
缺点，无法缩放，不好修改
7.让一个元素"看不见"有几种方式？有什么区别?
- “透明”
看不见元素，但浏览器直到元素的存在，元素占用位置；
opacity: 0 ; 从 0.0 （完全透明）到 1.0（完全不透明）。
visibility: hidden ; 和opacity:0 类似，
“隐藏”
不显示元素，元素不占用
display:none; 消失，不占用位置
