text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用：规定元素中的文本的水平对齐方式。作用于块级元素，能够使文本、图片、行内元素以及input标签等实现水平居中。
IE 盒模型和W3C盒模型有什么区别?
-
IE盒模型：
IE -
W3C盒模型：
W3C
区别：在设置CSS样式的width height属性时
对于IE：
width=content的width + padding-right + padding-left + border-right + border-left；
height=content的height + padding-top + padding-bottom + border-top + border-bottom；
对于W3C
width=content的width； height=content的height
*{ box-sizing: border-box;}的作用是什么？
CSS3中新增的样式，规定使用IE盒模型
line-height: 2和line-height: 200%有什么区别?
- line-height: 2：父元素的行高为2，会直接继承给子元素，子元素根据自己的font-size会动态的计算子元素自己的line-height。
- line-height: 200%：父元素的行高为200%，会根据父元素字体的大小计算出line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
示例：
HTML
<div id="eg-num">
<div class="box father1">
<p>我的line-height: 2我的line-height: 2我的line-height: 2我的line-height: 2</p>
</div>
</div>
<div id="eg-percent">
<div class="box father2">
<p>我的line-height: 200%我的line-height: 200%我的line-height: 200%我的line-height: 200%</p>
</div>
</div>
CSS
#eg-num {
line-height: 2;
}
#eg-percent {
line-height: 200%;
}
.box {
width: 500px;
border: 1px solid;
margin: 2px;
padding: 10px;
}
.father1 p {
font-size: 40px;
}
.father2 p {
font-size: 40px;
}
效果
inline-block有什么特性？
既有inline的特性，即不占据一整行，宽高由内容的宽高决定；
又有block的特性，即可设置属性width、height、margin、padding
如何去除缝隙？
- 产生缝隙的原因：浏览器默认回车符或空格为一个字符
- 方法1：设置父元素的font-size：0，即使空白字符的字体大小为0，再单独给子元素设置font-size；
- 方法2：删去空格或回车符，即压缩HTML代码
示例：
HTML
<div id="wrap">
<span class="box">饥人谷</span>
<span class="box">不作处理</span>
</div>
<div id="wrap1">
<span class="box">饥人谷</span>
<span class="box">改变父元素字体</span>
</div>
<div id="wrap2">
<span class="box">饥人谷</span><span class="box">不加回车或空格</span>
</div>
CSS
.box {
display: inline-block;
text-align: center;
border: 1px solid blue;
width: 200px;
margin-top: 30px;
}
#wrap1 {
font-size: 0;
}
#wrap1 span {
font-size: 20px;
}
效果
高度不一样的inline-block元素如何顶端对齐?
vertical-align: top;
示例：
HTML
<div id="wrap">
<span class="box">饥人谷</span>
<span class="box">我爱学习 学习使我快乐 我愿沉迷学习而无法自拔</span>
</div>
CSS
.box {
display: inline-block;
text-align: center;
border: 1px solid blue;
width: 100px;
vertical-align: top;
}
效果
CSS sprite 是什么?
CSS精灵图，将众多图标、图片合成到一张图片上，通过CSS样式属性background-position，设置图片的宽高位置，展现出需要的图标或图片。
优点：减少网页请求、提高网页加载性能；缺点：无法缩放、不好修改。
让一个元素"看不见"有几种方式？有什么区别?
diaplay: none;/*元素消失，不占用文档流中的位置*/
visibility: hidden;/*元素隐藏，本身存在但用户看不到，占用文档流的位置*/
opacity: 0;/*透明度为0，与visibility :hidden类似，在文档流中占用位置*/
background-color: (0,0,0,0);/*只是背景色透明*/
代码任务1 精灵图
代码任务2 iconfont
注：：before加颜色以后再给：hover加颜色无效，是因为before的优先级比hover高
