text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。
IE 盒模型和W3C盒模型有什么区别?
ie678怪异模式（不添加 doctype）使用 IE盒模型，宽度=边框+padding+内容宽度。
chrome， ie9+, ie678(添加 doctype) 使用W3C盒模型，宽度= 内容宽度
IE盒子模型
W3C盒子模型
W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
{ box-sizing: border-box;}的作用是什么？*
box-sizing属性，允许您以特定的方式定义匹配某个区域的特定元素。
再来看看box-sizing属性给出的几个值：
box-sizing
因此，*{ box-sizing: border-box;}的作用是对所有元素应用IE盒模型，指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
line-height: 2和line-height: 200%有什么区别?
line-height:2指行高为文字大小的2倍;line-height: 200%则行高为父元素文字大小的2倍。
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-block呈现行内元素的特性，不占据一整行，宽度大小由内容决定，同时又有块级元素的特性，可设置宽高和内外边距。
如何去除缝隙：
（1）移除标签间的空格
元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。有以下几种写法：
<div class="demo">
<span>饥人谷</span><span>饥人谷</span><span>饥人谷</span><span>饥人谷</span>
</div>
写法二：
<div class="demo">
<span>饥人谷
</span><span>饥人谷
</span><span>饥人谷
</span><span>饥人谷</span>
</div>
写法三：利用HTML注释标签
<div class="demo">
<span>饥人谷</span><!--
--><span>饥人谷</span><!--
--><span>饥人谷</span><!--
--><span>饥人谷</span>
</div>
(2)取消标签闭合
div class="demo">
<span>我是一个span
<span>我是一个span
<span>我是一个span
<span>我是一个span</span>
</div>
.demo span{
background:#ddd;
display: inline-block;
}
为了兼容IE6/IE7，最后一个标签需要闭合。
(3)给inline-block的父元素设置font-size:0,再给设置了inline-block的元素重新设置font-size.
inline-block元素如何顶端对齐:
将inline-block元素设置为vertical-align:top;
CSS sprite 是什么?
叫css精灵，是一种网页图片应用处理方式。将不同的图片/图标合并到一张图片上。这样可以减少网络请求次数，提高网页加载性能。
让一个元素"看不见"有几种方式？有什么区别?
display：none;
将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
visibility:hidden
和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。适用于那些元素隐藏后不希望页面布局会发生变化的场景。
opacity:0
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
background-color：rgba（0，0，0，0.2）；设置背景色透明
代码题：
代码1
代码2
网友评论