問答
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
