问答
1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- 作用：设置内部文本、图片 和 设置display:inline-block的子元素的位置
- 可以作用在：块级元素（display:block）或者设置display:inline-block的元素上
- 让这些元素水平居中：文本、图片、行内元素（display:inline）或者设置display:inline-block的元素
2.IE 盒模型和W3C盒模型有什么区别?
- IE盒模型：width=content(内容宽度)+padding(左右边距之和)+border(左右边框宽度之和) ,高度同理,设置
- W3C盒模型（标准盒模型）：width=content(内容宽度)，高度同理
- 区别：IE盒模型中padding和border所在控件在width和height之内，而W3C盒模型的width和height不包括padding和border
- 设置box-sizing:border-box的元素可以使用IE盒模型，设置box-sizing:content-box(默认值)即为W3C盒模型
3.*{ box-sizing: border-box;}的作用是什么？
设置元素使用IE盒模型，即宽度和高度包含padding和border
4.line-height: 2和line-height: 200%有什么区别?
- line-height: 2
文本行高为当前元素字体大小的2倍
- line-height: 200%
文本行高为当前文本所在块级元素的父元素的font-size的2倍（若是行内元素的文本，则会是行内元素所在块级元素的父元素的font-size的2倍）
5.inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- inline-block：让元素即呈现inline特征（不占据一整行，宽度缺省时由内容宽度决定），又有block特性（可设置宽高、内外边距）
- 设置父元素的字体大小为0
<div class="wrap">
<span class="s1">111111111111111</span>
<span class="s2">2222</span>
</div>
span{
border:1px solid;
display:inline-block;
vertical-align:top;
font-size:16px;
}
.wrap{
font-size:0;
}
3.设置vertical-align:top即可
6.CSS sprite 是什么?
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
7.让一个元素"看不见"有几种方式？有什么区别?
- opacity:0，设置整体透明度为0
- visibility:hidden，设置隐藏，和opacity类似
- display:none，设置消失，不占空间
- background-color:rgba(0,0,0,0)，设置背景透明度为0
区别：display:none彻底消失，不占位置，而其他只是透明度为0，隐藏但仍占位置；background-color的透明度只是背景的透明度
代码
1.使用 CSSsrpite 实现如下效果【效果范例8】. ps: 图片下载地址3
2.在iconfont上搜索"饥人谷"5， 使用字体图标实现代码1中的效果
- 下载图片，让入项目中
- 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" type="text/css" href="./iconfont.css">
<style type="text/css">
.icon{
font-family:"iconfont" !important;
font-size:40px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon:hover{
color:red;
}
</style>
</head>
<body>
<i class="iconfont icon-jirengulogored icon"></i>
</body>
</html>
3.结果：
-
鼠标不在图片上时：
Paste_Image.png -
鼠标在图片上时：
Paste_Image.png
