text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用：使行内元素实现水平居中。（这里面的行内元素包括文本，行内元素，设置display：inline-block的块级元素）
该属性可以被继承。因此要使想要的行内元素实现居中，可以在父元素或者更远的祖先元素上加上text-align: center;
IE 盒模型和W3C盒模型有什么区别?
IE盒模型的height, width为 content 的 length, width + padding 的 length, width + border 的 length, width。
W3C盒模型height, width只是 content 的 length, width。不包括 padding border 和margin。
*{ box-sizing: border-box;}的作用是什么？
这是CSS3的属性，在声明html5的情况下，浏览器以IE盒模型计算width 和 height。
line-height: 2和line-height: 200%有什么区别?
-
line-height定义了 行内元素 （display: inline）顶部和底部的空间，并且顶部和底部的空间相同。利用这个特点，可以为单行文字设置垂直居中。 -
line-height的值可以为normal, 数字, 带单位的长度（单位可以是 px, em, rem 等）或者百分比。推荐使用的值是数字， 也被称作是 ‘无单位’ 的line－height。原因是百分比或者带单位的长度的line-height这个属性会被子元素继承，而会影响整个页面的整体。无单位的line-height只和元素本身的字体大小有关。
举例来说：
我们有这样一个CSS：
body {
font-size: 16px;
line-height: ？;
}
h1 { font-size: 32px; ｝
p { font-size: 16px; }
.footer {font-size: 12px; }
| 元素 | font-size | 用 px 单位的line-height | 实际得到的 line height |
|---|---|---|---|
| body | 16px | 30px | 30px |
| h1 | 32px | 继承得到的30px | 30px |
| p | 16px | 继承得到的30px | 30px |
| footer | 12px | 继承得到的30px | 30px |
| 元素 | font-size | 用 % 单位的line-height | 实际得到的 line height |
|---|---|---|---|
| body | 16px | 200% | 16px*200% = 32px |
| h1 | 32px | 继承得到的32px | 32px |
| p | 16px | 继承得到的32px | 32px |
| footer | 12px | 继承得到的32px | 32px |
这样做的问题是h1和footer的行间距一个太窄一个又太宽，不是和他们各自的字体大小成比例。
如果我们用无单位的line-height 结果将是：
| 元素 | font-size | 用无单位的line-height | 实际得到的 line height |
|---|---|---|---|
| body | 16px | 2 | 16px*2 = 32px |
| h1 | 32px | 2 | 64px |
| p | 16px | 2 | 32px |
| footer | 12px | 2 | 24px |
这样行间距是各元素各自的比例，得到的结果会更美观。
- 一个行的高度是由行里面的所有的 inline boxes 中最高的box决定的。是
line-height而不是字体的大小决定inline box的高度。
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
-
inline-block与inline元素相似，不占据一整行。不同点在于inline-block可以像block一样设置 width 和 length。margin 和 padding 的上下设置也会有效果。 - 去除缝隙的几种方式
- 改写成
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
或
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
- html5中标签不关闭
<ul>
<li>one
<li>two
<li>three
</ul>
- 也可以将
inline-block元素的父元素设置font-size:0;然后在给inline-block元素重新设置一个font-size。 - 达到顶端对齐，可以给
inline-block元素添加vertical-align:top;
CSS sprite 是什么?
CSS Sprite (CSS 雪碧图) 是将单一的小图合成的一张大图。这样浏览器只需一次请求就可以得到所有图片。设置background-position来显示出不同的小图。这样可以减少向服务器的请求数量，提高加载速度。
让一个元素"看不见"有几种方式？有什么区别?
-
opacity:0设置元素透明度为0，虽然看不见，但仍占据空间 - vidibility:hidden 隐藏元素，与
opacity:0相似，仍占据空间 - display:none 元素从dom中消失，相当于元素被删除，不会有元素的位置
