問答
1.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
- 作用：設置內(nèi)部文本痴脾、圖片 和 設置display:inline-block的子元素的位置
- 可以作用在：塊級元素（display:block）或者設置display:inline-block的元素上
- 讓這些元素水平居中：文本、圖片、行內(nèi)元素（display:inline）或者設置display:inline-block的元素
2.IE 盒模型和W3C盒模型有什么區(qū)別?
- IE盒模型：width=content(內(nèi)容寬度)+padding(左右邊距之和)+border(左右邊框?qū)挾戎? ,高度同理,設置
- W3C盒模型（標準盒模型）：width=content(內(nèi)容寬度)艘儒，高度同理
- 區(qū)別：IE盒模型中padding和border所在控件在width和height之內(nèi)，而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%有什么區(qū)別?
- line-height: 2
文本行高為當前元素字體大小的2倍
- line-height: 200%
文本行高為當前文本所在塊級元素的父元素的font-size的2倍（若是行內(nèi)元素的文本兵拢，則會是行內(nèi)元素所在塊級元素的父元素的font-size的2倍）
5.inline-block有什么特性晕窑？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
- inline-block：讓元素即呈現(xiàn)inline特征（不占據(jù)一整行卵佛，寬度缺省時由內(nèi)容寬度決定）杨赤，又有block特性（可設置寬高敞斋、內(nèi)外邊距）
- 設置父元素的字體大小為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在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應用處理方式疾牲。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去植捎，這樣一來，當訪問該頁面時阳柔，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了焰枢。
7.讓一個元素"看不見"有幾種方式？有什么區(qū)別?
- opacity:0舌剂，設置整體透明度為0
- visibility:hidden济锄，設置隱藏，和opacity類似
- display:none霍转，設置消失荐绝，不占空間
- background-color:rgba(0,0,0,0)，設置背景透明度為0
區(qū)別：display:none徹底消失避消，不占位置低滩，而其他只是透明度為0，隱藏但仍占位置岩喷；background-color的透明度只是背景的透明度
代碼
1.使用 CSSsrpite 實現(xiàn)如下效果【效果范例8】. ps: 圖片下載地址3
2.在iconfont上搜索"饑人谷"5恕沫， 使用字體圖標實現(xiàn)代碼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.結(jié)果：
-
鼠標不在圖片上時：
Paste_Image.png -
鼠標在圖片上時：
Paste_Image.png
