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

text-align:center；

text-align用在塊級(jí)元素上，對(duì)里面的行內(nèi)元素生效
text-align：center 會(huì)使得行內(nèi)元素居中

2. IE 盒模型和W3C盒模型有什么區(qū)別?

如圖：

iehemoxing.JPG

bzhemoxing.JPG

IE盒模型的width和height所描述的內(nèi)容content包含padding和border；
標(biāo)準(zhǔn)盒模型的width和height所描述的內(nèi)容content不包含padding和border。

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

*{box-sizing: border-box;} 是CSS3的新樣式，用來聲明瀏覽器用IE盒模型進(jìn)行解析CSS代碼。

4. line-height: 2和line-height: 200%有什么區(qū)別?

line-height: 2 設(shè)置文本的行高為2倍本身大小的高度；
line-height: 200% 設(shè)置文本的行高為父元素文字的高度的2倍。

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

inline-block 用于將行內(nèi)元素(inline level)展示為inline-block模式，其特性：

1. 具有行內(nèi)元素的特性，不占據(jù)整行；
2. 具有塊級(jí)元素的特性， 可以設(shè)置寬高（height & width）

inline-block模式去除縫隙方式：

1. 去除行內(nèi)元素標(biāo)簽之間的空格和換行
2. 通過CSS設(shè)置父容器的font-size:0，再通過.box類選擇器將font-size設(shè)置成原值

1.png

2.png

3.png

高度不一樣的inline-block元素設(shè)置頂端對(duì)齊：

1.png

2.png

6. CSS sprite 是什么?

CSS Sprite即CSS 精靈圖（民間俗稱雪碧圖），是將很多小圖合并成一張大圖，來實(shí)現(xiàn)減少HTTP請(qǐng)求的目的，通過CSS里的background-position屬性進(jìn)行偏移，來實(shí)現(xiàn)適時(shí)顯示正確的圖片。

7. 讓一個(gè)元素"看不見"有幾種方式？有什么區(qū)別?

讓一個(gè)元素“看不見”有4種方式：

1. visibility: hidden;
2. opacity: 0;
3. display: none;
4. background-color: rgba(0,0,0,0.2);

其中：
visibility:hidden;保留元素空間，只是在頁面上不顯示
opacity:0 和 visibility:hidden類似
display:none; 瀏覽器不再繪制，不占據(jù)空間
background-color:rgba(0,0,0,0.2); 只針對(duì)背景色，用來設(shè)置背景透明