1.text-align: center的作用是什么刽肠，作用在什么元素上？能讓什么元素水平居中蹋艺？
text-align:center;作用是讓文本的對(duì)齊方式為居中，作用在行內(nèi)元素上，能設(shè)置文本和img等行內(nèi)元素居
中迅栅，也對(duì)inline-block元素有作用。
2.IE 盒模型和W3C盒模型有什么區(qū)別?
IE 盒模型中設(shè)定的 width 寬度包括 content晴玖、padding读存、border 三部分的寬度；
W3C 盒模型中設(shè)定的 width 寬度僅包括 content 自身呕屎，不包括 padding 和 border 部分的寬度
3.*{ box-sizing: border-box;}的作用是什么让簿？
設(shè)置所有 CSS 的盒模型遵從 IE 盒模型的標(biāo)準(zhǔn)，此時(shí)在 CSS 設(shè)置的屬性中秀睛，width 將包括內(nèi)容寬度 + 內(nèi)邊距寬度 + 邊框?qū)挾榷保辉僮裱?W3C 盒模型的標(biāo)準(zhǔn)。
4.line-height: 2和line-height: 200%有什么區(qū)別?
line-height: 2 ：設(shè)置行高為本身文字高度的兩倍
line-height: 200% ：設(shè)置行高為父元素文字高度的兩倍
5.inline-block有什么特性蹂安？如何去除縫隙椭迎？高度不一樣的inline-block元素如何頂端對(duì)齊?
- inline-block 可以使得元素?fù)碛行袃?nèi)元素“不占據(jù)一整行，寬度由內(nèi)容寬度決定”特性的同時(shí)田盈，又呈現(xiàn)出塊級(jí)元素“可設(shè)置寬高內(nèi)外邊距”的特性畜号。
- 為解決縫隙問題，可以讓兩個(gè)行內(nèi)元素緊鄰到一起允瞧，如：
`<span class="box"></span><span class="box"></span>`
也可以設(shè)置兩個(gè)行內(nèi)元素所占?jí)K的字體大小為零简软，如：
``` <div style="font-size: 0">
<span class="box b1"></span>
<span class="box b2"></span>
</div>
```
6.CSS sprite 是什么?
CSS Sprites是一種網(wǎng)頁圖片應(yīng)用處理方式,就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用 CSS的"background-position","background-image","background-repeat"的組合進(jìn)行背景定位.
其優(yōu)點(diǎn)在于:
- 減少網(wǎng)頁的http請(qǐng)求,提高性能,這也是CSS sprites最大的優(yōu)點(diǎn),也是其被廣泛傳播和應(yīng)用的主要原因;
- 減少圖片的字節(jié):多張圖片合并成1張圖片的字節(jié)小魚多張圖片的字節(jié)總和;
- 減少了命名困擾:只需要對(duì)一張集合的圖片命名,不需要對(duì)每一個(gè)元素進(jìn)行 命名提高制作效率;
更換風(fēng)格方便:只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式,整個(gè)網(wǎng)頁的風(fēng)格就可以改變述暂，維護(hù)起來更加方便.
其缺點(diǎn)在于:
- 圖片合成比較麻煩;
- 背景設(shè)置時(shí),需要得到每一個(gè)背景單元的精確位置;
- 維護(hù)合成圖片時(shí),最好只是往下加圖片,而不要更改已有圖片.
7.讓一個(gè)元素"看不見"有幾種方式痹升？有什么區(qū)別?
- opacity: 0 ; 整體透明度為0，但是元素位置依然保留贸典，其它元素不會(huì)占據(jù)該元素所在的位置视卢；
- visibility: hidden ; 和opacity:0 類似
- display: none; 元素消失，不占用位置廊驼，其它元素會(huì)占用該元素所在的位置
- background-color: rgba(0据过，0，0妒挎，0.2) 只會(huì)改變背景色绳锅，不會(huì)變?cè)氐念伾?- height: 0; overflow: hidden;不占據(jù)空間,無法點(diǎn)擊
