一、text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align: center的作用是使文本居中
- 在父元素中寫入，可以使該元素下所有文本子元素居中（包括塊級元素p，h，和行內(nèi)元素span），但是不是文本元素就不會居中，例如示例中的box
- 直接對文本塊級元素寫入，例如直接在p和h1~h6元素寫入，該文本會居中
- 直接對行內(nèi)元素寫入，不會居中，例如示例中的span，直接寫入沒有效果
總結(jié)：text-center作用于所有文本元素，但是對于行內(nèi)元素，需要寫在它的父元素上，直接則無效；
二、IE 盒模型和W3C盒模型有什么區(qū)別?
對于兩種模型這里有一張圖：
可以看到IE的盒模型與W3C盒模型的區(qū)別在于寬高的計(jì)算
- w3c盒模型的寬高是以內(nèi)容為基準(zhǔn)計(jì)算的，寬高=內(nèi)容
- 而IE盒模型是以border為基準(zhǔn)計(jì)算，寬高=內(nèi)容+padding+border
三、*{ box-sizing: border-box;}的作用是什么？
box-sizing是css3的新樣式，有兩個(gè)值
- box-sizing：content-box；標(biāo)準(zhǔn)盒模型（瀏覽器默認(rèn)樣式）；
- box-sizing：border-box；IE盒模型
- 默認(rèn)情況下（content-box），實(shí)際所占寬高度=外邊距（margin）+ 邊界寬度(border-width) + 內(nèi)邊距（padding）+ 高度（height） / 寬度（width）
- 如果設(shè)置了border-box， 實(shí)際所占寬高度 = 設(shè)置的高度（height）/ 設(shè)置的寬度（width）+ 外邊距（margin）
總結(jié)：設(shè)置這個(gè)屬性，更容易計(jì)算位置，并且更符合我們對于盒子的定義，使排版更容易計(jì)算。
四、line-height: 2和line-height: 200%有什么區(qū)別?
可以很清楚的看到，兩個(gè)h2的行高是不一樣的
- line-height:2;對于本身文字高度的2倍（只與自己有關(guān)，與父元素?zé)o關(guān)）
- line-height:200%;它父容器（父元素）文字高度的兩倍，是一個(gè)已經(jīng)計(jì)算好的定值，可能會導(dǎo)致重合。
- 繼承上的區(qū)別：如果行高繼承不帶單位，那么它會先繼承行高，再根據(jù)當(dāng)前子元素的字體大小來計(jì)算行高；反之，如果行高繼承是帶有單位，那么它將先計(jì)算行高，接著再讓子元素繼承。詳細(xì)請戳
五、inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
- 既展現(xiàn)inline（內(nèi)聯(lián)元素）的特性（不占據(jù)一整行，寬度由內(nèi)容寬度決定）
- 又呈現(xiàn)block（塊級元素）的特性（可設(shè)置寬高，內(nèi)外邊距）
- 但是兩元素之間會呈現(xiàn)縫隙，是因?yàn)榭瞻鬃址麑?dǎo)致
消除空白縫隙的方法:（示例見上圖）
- 消除兩個(gè)元素之間的空白字符
- 設(shè)置父元素的字體大小為0，然后在該元素中重新設(shè)置字體大小
高度不一樣的inline-block如何頂端對齊
vertical-align:top
六、CSS sprite 是什么?
CSS Sprite就是將多個(gè)背景圖片拼合到一個(gè)圖片上。然后在CSS里通過position定義到該圖片上，實(shí)現(xiàn)多個(gè)位置的背景，一張圖片搞定 。其最大的優(yōu)點(diǎn)在于減少網(wǎng)頁的http請求，提高網(wǎng)頁性能。
七、讓一個(gè)元素"看不見"有幾種方式？有什么區(qū)別?
- opacity:0;將元素透明度設(shè)置為0后，用戶眼中是不存在的（所有元素不可見），但實(shí)際存在，并且瀏覽器知道且保留它占據(jù)的空間。
- visibility:hidden;與上類似，瀏覽器知道它存在，保留其占據(jù)的空間。
- display:none;與前兩個(gè)有很大的不同，元素將在頁面上將徹底消失，且瀏覽器也當(dāng)它不存在，不會保留其空間，元素本來占有的空間則會被其他元素占有。
- background-color:rgba(0,0,0,0)與opacity:0;不同，它只是設(shè)置背景透明，其它元素可見
點(diǎn)擊此處更詳細(xì)
