1. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- text-align作用在块级元素上，可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中。注意text-align是可继承元素，所以此块级元素的子元素如果是块级元素会继承它的text-align属性，使子块级元素内的文字或图片或内联元素居中，但是子块级元素不会居中。
- 作用在行内元素以及inline-block元素上
- 能让行内内容水平居中
2. IE 盒模型和W3C盒模型有什么区别?
盒模型在初学css的时候就会接触到，其实很容易理解，这里也不多废话，但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成，也要更多的了解如何在不同情况下利用盒模型的特点进行布局。
其实IE的盒模型问题只会出现在IE5.5及其更早的版本中，因为在IE6及更新的版本在标准兼容模式下使用的是W3C的盒模型标准，但事实上不仅IE5.5，连IE6的使用率也很少了，这里对他们进行讨论只是为了更深刻的理解盒模型。
下面是两个盒模型的图
W3C盒模型&IE盒模型图
通过图我们可以知道区别只要是一下两点：
- IE盒模型：如果设置一个元素的width，那么这个宽度实际上=padding+border+content，height同理
- W3C盒模型：如果给一个元素设置width，那么这个宽度只是用来描述content的宽度，padding和border并不包含在所设置的width内，height同理
故此我们可以得到的结论是：
IE中的box换行了，这就是因为IE中的width是包括了padding的，而W3C也就是我们平常使用的盒模型不包括，不管padding加多少内容区域的宽度不会改变，这也十分合理.
避免触发IE盒模型的方法是使用<!DOCTYPE html>声明，告诉IE采用W3C盒子模型即可。
3. { box-sizing: border-box;}的作用是什么？
-
box-sizing: border-box; IE盒模型
-
box-sizing: content-box; 设置使用w3c盒模型
4. line-height: 2和line-height: 200%有什么区别?
-
line-height: 2; 是将行高设置为元素字体高度的2倍
-
line-height: 200%; 是将行高设置为父元素字体高度的2倍
5. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
-
既呈现 inline 的特性，又呈现 block 特性，不占据一整行，占用位置由宽度决定，可以设置宽高，可以设置内外边框。
-
可以把两个元素挨在一起写，或者把紧挨缝隙的元素放在一个父元素里，再将父元素的font-size设置为0，就可以消除缝隙。
-
设置 vertical-align 为 top，就可以顶端对齐。
6. CSS sprite 是什么?
指将不同的图片、图标合并到一张图上，以减少页面的网络请求。
7. 让一个元素"看不见"有几种方式？有什么区别?
- display: none 元素消失，不占用位置
- visibility: hidden 隐藏，但对浏览器来说还在，占用位置
- opacity: 0 元素透明，看不见但还是占用位置
- background-color: rgba(0, 0, 0, 0) 背景透明，只针对背景
网友评论