text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align CSS屬性定義行內內容（例如文字）如何相對于它的塊父元素對齊，它并不控制塊元素自己的對齊，只控制它的行內內容的對齊，其屬性值有：
- start:如果內容方向是左至右，則等于left，反之則為right。
- end:如果內容方向是左至右，則等于right，反之則為left。
- left:行內內容向左側邊對齊。
- right:行內內容向右側邊對齊。
- center:行內內容居中。
- <string>:第一個出現的該（單字符）字符串被用來對齊。跟隨的關鍵字定義對齊的方向。例如，可用于讓數字值根據小數點對齊。
- justify:文字向兩側對齊。
- match-parent:和inherit類似，區別在于start和end的值根據父元素的direction確定，并被替換為恰當的left或right。
text-align:center作用于行內元素，使行內元素居中。
此外，在定位模式中，在上級容器塊中設置text-align:center;，可以使內容水平居中對齊。
IE 盒模型和W3C盒模型有什么區別?
W3C標準中padding、border所占的空間不在width、height范圍內，大家俗稱的IE的盒模型width包括content尺寸＋padding＋border
IE盒模型
width = border + padding + 內容的 width，
height = border + padding + 內容的 height。
W3C盒模型
尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。
W3C盒模型在IE中的解決辦法：
在代碼頂部加如下的 doctype 聲明，使頁面以W3C盒子模型渲染。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
將W3C標準盒模型轉化為IE盒模型
使用box-sizing屬性
box-sizing 屬性用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。可以使用此屬性來模擬不正確支持CSS盒子模型規范的瀏覽器的行為。
其屬性值有：
- content-box：默認值，W3C標準盒子模型。
- border-box：width 和 height 屬性包括內容，內邊距和邊框，但不包括外邊距。這是當文檔處于 Quirks模式 時Internet Explorer使用的盒模型。
- padding-box：width 和 height 屬性包括內容和內邊距，但是不包括邊框和外邊距。只有Firefox實現了這個值，它在Firefox 50中被刪除。
參考信息：信息來源
*{ box-sizing: border-box;}的作用是什么？
將W3C標準盒模型轉化為IE盒模型。
line-height: 2和line-height: 200%有什么區別?
line-height: 2：行高是盒子模型里的content行高的兩倍；
line-height: 200%：行高是父元素行高的兩倍。
inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
特性：
- 既呈現 inline 特性(不占據一整行，寬度由內容寬度決定)
- 又呈現 block 特性 (可設置寬高，內外邊距)
縫隙問題的處理
- 內容之間不包含空格或者轉行：
<span>Hello</span><<span>World</span>
- 將父級元素的字體大小設置為0，子元素再設置字體大小：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
body {
text-align: center;
}
.content {
font-size: 0;
}
.box {
border: 1px solid black;
display: inline-block;
font-size: 16px;
width: 100px;
}
</style>
</head>
<body>
<div class="content">
<span class="box">Hello</span>
<span class="box">World</span>
</div>
</body>
高度不一樣的inline-block元素如何頂端對齊?
vertical-align:top;
CSS sprite 是什么?
如果在一個頁面上使用大量圖片，每一張圖片的加載一般都會給頁面顯示增加一定時間的延遲，同時也會給服務器增加負載，所以我們將多個圖片組合到一個圖片上，這個文件就稱為CSS精靈圖。
目的
減少http請求數，加速內容顯示。
因為每請求一次，就會和服務器連接一次，建立連接是需要額外時間的。
使用場景：
- 靜態圖片，不隨用戶信息的變化而變化
- 小圖片，圖片容量比較小
- 加載量比較大
- 一些大圖不建議拼成精靈圖
實現原理
css的background-position屬性來實現精靈圖的顯示。
控制一個層，可顯示的區域范圍大小；
通過一個窗口，進行背景圖的滑動。
實現方式
缺點
- 無法縮放
- 不好修改
CSS sprite練習：查看鏈接
Icon Font（把字體做成圖標）
- 制作字體文件
一般由設計師設計制作，并可上傳至http://www.iconfont.cn進行使用。這里介紹網站上已有資源的使用。
打開網站http://www.iconfont.cn，搜索所需圖標，選中后添加至購物車，點擊購物車按鈕并將選定的圖標添加至項目（如果沒有項目需進行新建），進入項目中便可進行相關信息查看，也可將文件進行下載使用。
- 聲明font-family
- 使用本地鏈接
將文件下載到本地進行引用。 - 使用第三方鏈接
在http://www.iconfont.cn項目中可以直接點擊查看在線鏈接生成鏈接。
- 使用本地鏈接
- 使用font-family
- 使用HTML實體
- 使用CSS:before
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Icon Font</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
@font-face {
font-family: 'iconfont';
/* project id 373290 */
src: url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.eot');
src: url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.woff') format('woff'),
url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.ttf') format('truetype'),
url('//at.alicdn.com/t/font_xu5ex3nf63onipb9.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 200px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconfont:hover {
color: #D81E06;
}
.other-iconfont:before {
content: "\e605";
}
</style>
</head>
<body>
<!-- 使用HTML實體進行顯示 -->
<span class="iconfont"></span>
<!-- 使用CSS:before進行顯示 -->
<span class="iconfont other-iconfont"></span>
</body>
Icon Font練習：查看鏈接
讓一個元素"看不見"有幾種方式？有什么區別?
-
opacity: 0;透明度為0，但仍然在文檔流中 -
visibility: hidden;使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變 -
display:none;對象脫離文檔流，不給它保留其物理空間，即該對象在頁面上徹底消失 -
background-color: rgba(0，0，0，0.2);只是背景色透明 -
text-indent:-9999px；將內容移動到看不見的地方 -
z-index:設置為無限大的值如9999;或-9999讓其覆蓋或者被其他元素覆蓋
模仿練習：icecream
