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

• 作用是让元素的文本内容水平居中
• 写在块元素上，但并不控制块元素自己的对齐。只控制它的行内内容的对齐
• 能让块级元素内的文本内容水平居中

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

• IE盒模型
  • IE盒模型的width和标准盒模型的width和height是指content的高度和宽度值加上border和padding的尺寸值。即width包括content尺寸＋padding＋border

IE盒模型.JPG

• W3C盒模型
  • 标准盒模型的width和height是指content的高度和宽度值，不包括border和padding的尺寸值。即padding、border所占的空间不在width、height范围内

标准盒模型.JPG

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

• 设置当前页面的所有元素的盒模型样式符合IE盒模型样式

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

• 为某个元素单独设置 line-height属性时，line-height: 2 和 line-height: 200% 的作用一样，正常情况下都是为这个元素设置行高为元素自身字体大小的两倍。当父元素的字体大小大于子元素到一定程度时，那么子元素的行高则为父元素字体大小的两倍，可以测试
• 当某元素的行高属性继承自父元素时，如果父元素设置的是 line-height: 2，当子元素字体小于父元素时，那么子元素的行高则为自身字体大小的两倍，反之则是父元素的两倍；如果父元素设置的是 line-height: 200%，那么子元素的行高则为父元素字体大小的两倍

不得不说这是一个奇怪的现象

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

• 当一个元素的display属性设置为inline-block时，那么该元素既表现出行内元素的特性（不占据一行，宽度由内容宽度决定），又具有块级元素的特性（可设置宽高，内外边距）
• 去除缝隙

  • 删除标签间的空白字符

    • 测试1

  • 将父元素的font-size设置为0，自身的font-size设置为非0值。

    • 测试2
• 顶端对齐
  • 使用vertical-align属性，属性值设置为top，即vertical-align：top;

6.CSS sprite 是什么?

• 精灵图（又名雪碧图）
• CSS sprite 是一种网页图片处理方式。它的做法是把网页中的零星图片（比如小图标）都合并到一张大图片中，然后利用 background-position 属性选择合适的图片，这样在加载网页的时候可以减少图片的请求次数，从而提高网页的加载速度

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

• 有4种

1. opacity: 0 元素的透明度为0，让元素不可见，但元素仍然占据原本的页面空间
2. visibility: hidden 和opacity: 0类似，将元素隐藏，但元素仍然占据原本的页面空间
3. display:none 让元素消失，不占用页面位置
4. background-color：rgba（0，0，0，0.2）；设置背景色透明