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

text-align 屬性規(guī)定元素中的文本的水平對(duì)齊方式
可能的值

|值 |描述|
|-||
|left| 把文本排列到左邊。默認(rèn)值：由瀏覽器決定。|
|right |把文本排列到右邊。|
|center |把文本排列到中間。|
|justify |實(shí)現(xiàn)兩端對(duì)齊文本效果。|
|inherit |規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值。|

1. text-align不會(huì)作用于塊級(jí)元素。
2. text-align作用于文本。
3. text-align作用于內(nèi)聯(lián)元素。
4. text-align作用于圖片。
5. text-align作用于inline-block

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

標(biāo)準(zhǔn)盒子模型

W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE盒子模型

IE 盒子模型的范圍也包括 margin、border、padding、content，和標(biāo)準(zhǔn) W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

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

可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。

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

• 繼承上的區(qū)別
• 父元素設(shè)置line-height:2會(huì)直接繼承給子元素，子元素根據(jù)自己的font-size再去計(jì)算子元素自己的line--
  height。
• 父元素設(shè)置line-height:200%是計(jì)算好了line-height值，然后把這個(gè)計(jì)算值給子元素繼承，子元素繼承拿到的就是最終的值了。此時(shí)子元素設(shè)置font-size就對(duì)其line-height無影響了。

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

• inline-block 會(huì)將對(duì)象呈現(xiàn)為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈現(xiàn)。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈現(xiàn)在同一行內(nèi)。(準(zhǔn)確地說，應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對(duì)象，四周元素保持在同一行，但可以設(shè)置寬度和高度地塊元素的屬性)

• 如何去除縫隙:

1. 移除空格
   元素間留白間距出現(xiàn)的原因就是標(biāo)簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了?？紤]到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：

<div class="space">
    <a href="##">
    惆悵</a><a href="##">
    淡定</a><a href="##">
    熱血</a>
</div>

或者是：

<div class="space">
    <a href="##">惆悵</a
    ><a href="##">淡定</a
    ><a href="##">熱血</a>
</div>

或者是借助HTML注釋：

<div class="space">
    <a href="##">惆悵</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">熱血</a>
</div>

等

2. 使用margin負(fù)值

.space a {
    display: inline-block;
    margin-right: -3px;
}

3. 不讓標(biāo)簽閉合
   如下處理：

<div class="space">
    <a href="##">惆悵
    <a href="##">淡定
    <a href="##">熱血</a>
</div>
為了兼容IE6/IE7等瀏覽器，最后一個(gè)列表的標(biāo)簽加上閉合。

4. 使用font-size:0

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

5. 使用letter-spacing

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

6. 使用word-spacing

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

一個(gè)是字符間距letter-spacing一個(gè)是單詞間距word-spacing，大同小異。據(jù)測(cè)試，word-spacing的負(fù)值只要大到一定程度，其兼容性上的差異就可以被忽略。因?yàn)?，貌似?code>word-spacing即使負(fù)值很大，也不會(huì)發(fā)生重疊。

• 高度不一樣的inline-block元素如何頂端對(duì)齊
  給 inline-block 元素添加 vertical-align屬性設(shè)置對(duì)齊方式

可能的值

|值| 描述|
|-||
|baseline| 默認(rèn)。元素放置在父元素的基線上。|
|sub |垂直對(duì)齊文本的下標(biāo)。|
|super |垂直對(duì)齊文本的上標(biāo)|
|top| 把元素的頂端與行中最高元素的頂端對(duì)齊|
|text-top| 把元素的頂端與父元素字體的頂端對(duì)齊|
|middle| 把此元素放置在父元素的中部。|
|bottom |把元素的頂端與行中最低的元素的頂端對(duì)齊。|
|text-bottom| 把元素的底端與父元素字體的底端對(duì)齊。|
|% |使用 "line-height" 屬性的百分比值來排列此元素。允許使用負(fù)值。|
|inherit| 規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。|

6. CSS sprite 是什么?

sprite指的是精靈圖，CSS sprite簡(jiǎn)單來說就是圖片拼合技術(shù)，主要是指將網(wǎng)頁(yè)上很多用于裝飾作用的小圖片全部整合到一張圖片內(nèi)，減少網(wǎng)頁(yè)加載時(shí)的HTTP請(qǐng)求并發(fā)數(shù)，頁(yè)面加載時(shí)利用CSS中的背景圖片定位屬性background-position來指定需要顯示這張大圖上指定位置的部分

使用這個(gè)技術(shù)的優(yōu)點(diǎn)就是減少頁(yè)面加載時(shí)的瞬間HTTP請(qǐng)求并發(fā)數(shù)，提高了加載速度

缺點(diǎn)是這些被整合到一張圖片的各種小圖案后期維護(hù)修改比較麻煩，修改任意一個(gè)小圖案都需要修改這張整圖，同時(shí)還需要注意小圖片在這個(gè)整圖上的位置不能改變

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

• display:none
  設(shè)置元素的display為none是最常用的隱藏元素的方法。

.hide {
   display:none; 
 }

將元素設(shè)置為display:none后，元素在頁(yè)面上將徹底消失，元素本來占有的空間就會(huì)被其他元素占有，也就是說它會(huì)導(dǎo)致瀏覽器的重排和重繪。

• visibility:hidden
  設(shè)置元素的visibility為hidden也是一種常用的隱藏元素的方法，和display:none的區(qū)別在于，元素在頁(yè)面消失后，其占據(jù)的空間依舊會(huì)保留著，所以它只會(huì)導(dǎo)致瀏覽器重繪而不會(huì)重排。

.hidden{
    visibility:hidden
}

visibility:hidden適用于那些元素隱藏后不希望頁(yè)面布局會(huì)發(fā)生變化的場(chǎng)景

• opacity:0
  opacity屬性我相信大家都知道表示元素的透明度，而將元素的透明度設(shè)置為0后，在我們用戶眼中，元素也是隱藏的，這算是一種隱藏元素的方法。

.transparent {
    opacity:0;
 }

這種方法和visibility:hidden的一個(gè)共同點(diǎn)是元素隱藏后依舊占據(jù)著空間，但我們都知道，設(shè)置透明度為0后，元素只是隱身了，它依舊存在頁(yè)面中。

• text-indent:-999em
  這個(gè)屬性本來是用來設(shè)置文本縮進(jìn)的，一般我們習(xí)慣是首行縮2個(gè)中文字所以一般的用法是text-indent:2em但它允許負(fù)值，假如給它一個(gè)負(fù)值，這個(gè)負(fù)值足夠大，大到一般我們?yōu)g覽器無法顯示，好像它跟瀏覽器寬度躲貓貓一樣。

.move{
    text-indent:-999em
}

假如說用戶瀏覽器分辨率不夠支撐其縮減的寬度，那么它就默認(rèn)顯示“沒有”，但是它會(huì)占據(jù)網(wǎng)頁(yè)空間，只不過是我們?cè)谇岸恕翱床灰姟倍?，但是它?huì)影響到文檔的布局，感覺它是懸掛在本文前面，一直掛到你電腦屏幕足夠大顯示它為止。
一個(gè)比較好的可選方案：

.move{
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

• font-size:0
  這個(gè)值是利用了字體大小來控制，通常默認(rèn)的網(wǎng)頁(yè)字體大小為12-14px，不過當(dāng)文字大小為0px就可以控制文字”消失“了。

.size{
    font-size:0
}

• .position
  我們都知道position是用來定位元素的，數(shù)值可正可負(fù)，假如說一個(gè)元素的距離我們的視窗（電腦顯示屏幕）足夠大，大到我們?yōu)g覽器也無法顯示出來，那么它也是“消失”的。

.move{
   position:absolute;
   top:-999em
}