text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中

text-align樣式的定義就是塊狀元素中的inline內容（包括inline,inline-block的元素，文本）的對齊方式。
text-align: center：作用設置文本或img標簽等一些內聯對象（或與之類似的元素）的居中。
作用在塊狀元素中的inline的內容上，能讓文本和inline元素的水平居中。

text-align：取值：

IE 盒模型和W3C盒模型有什么區別?

什么是IE盒模型

IE盒模型

什么是標準盒模型

標準盒模型

區別：

W3C標準中padding、border所占的空間不在width、height范圍內，大家俗稱的IE的盒模型width包括content尺寸＋padding＋border

ie678怪異模式（不添加 doctype）使用 ie 盒模型，寬度=邊框+padding+內容寬度

image.png

chrome， ie9+, ie678(添加 doctype) 使用標準盒模型， 寬度= 內容寬度

image.png

使用css3新樣式box-sizing

box-sizing: content-box：w3c標準盒模型
box-sizing: border-box：“IE盒模型”

<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;"></div>

*{ box-sizing: border-box;}的作用是什么？

該屬性是讓當前頁面所有的元素寬高屬性都按照IE的盒子模型的方式來計算

line-height: 2和line-height: 200%有什么區別?

line-height: 2 為本身文字的高度的2倍；
line-height: 200%為父元素文字的高度的兩倍；

繼承問題：父元素的line-height有單位（px、%）,那么繼承的值則是換算后的一個具體的px級別的值；
屬性值沒有單位，則瀏覽器會直接繼承這個“因子（數值）”，而非計算后的具體值，此時它的line-height會根據本身的font-size值重新計算得到新的line-height 值。
參考

inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?

特性：既有inline特性（不占據一整行，寬度由內容寬度決定），又有 block特性(可設置寬高，內外邊距)
去除縫隙：可先將具有inline-block特性的元素標簽加一個空的div塊包裹，將其font-size設置為0，同時在將inline-block對應的元素標簽字體在css中恢復原來樣式，這樣可以巧妙的出去兩個inline-block之間的空字符所產生的間隙
頂端對齊：添加CSS樣式vertical-align:top;

CSS sprite 是什么?

精靈圖
指將不同的圖片/圖標合并在一張圖上。
使用CSS Sprite 可以減少網絡請求，提高網頁加載性能。

讓一個元素"看不見"有幾種方式？有什么區別?

• display: none：元素消失，不占位置
• opacity: 0：元素透明度為0，還占有位置
• visibility: hidden：與opacity: 0類似
• background-color: rgba(0,0,0,0)：背景色透明

鼠標經過
字體圖標實現