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

text-align:center作用在塊級元素或者設(shè)置display:inline-block的元素上,能讓文本、圖片、行內(nèi)元素或者設(shè)置display:inline-block的元素水平居中。

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

W3C標(biāo)準(zhǔn)中padding、border所占的空間不在width、height范圍內(nèi)，大家俗稱的IE的盒模型width包括content尺寸＋padding＋border

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

使用IE盒模型，即此元素的內(nèi)邊距和邊框不再會增加它的寬度。

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

line-height:2 是指行高是content的兩倍行高;
line-height:200%是指行高是父元素的行高的兩倍;

• 前者不會繼承父類的行高，會按照自身的字體大小乘以2計算行高；
• 后者會繼承父類計算好的行高，不論自身字體大小多少，沒有繼承的情況下，如果字體大小相同，行高便相同

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

• 既呈現(xiàn) inline 特性(不占據(jù)一整行，寬度由內(nèi)容寬度決定)，又呈現(xiàn) block 特性 (可設(shè)置寬高，內(nèi)外邊距)；
• 去除縫隙
  <span class="box">hello</span><span class="box">hello</span>
  或者

<div class="wrap">                                       
    <span class="box">hello</span>
    <span class="box">hello</span>
</div>

.wrap{
   font-size: 0;
}
.box{
  font-size: 14px;
}

• 頂端對齊 vertical-align: top;

6.CSS sprite 是什么?

指將不同的圖片/圖標(biāo)合并在一張圖上。
使用CSS Sprite 可以減少網(wǎng)絡(luò)請求，提高網(wǎng)頁加載性能

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

• opacity: 0 ; 透明度為0，整體
• visibility: hidden ; 和opacity:0 類似
• display:none; 消失，不占用位置
• background-color: rgba(0，0，0，0) 只是背景色透明

8.代碼

• 代碼1
• 代碼2