1.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中？
text-align 屬性規定元素中的文本的水平對齊方式。
該屬性通過指定行框與哪個點對齊，從而設置塊級元素內文本的水平對齊方式。通過允許用戶代理調整行內容中字母和字之間的間隔，可以支持值 justify；不同用戶代理可能會得到不同的結果。
從上述引用表述可以看出，text-align的作用是規定元素中文本的水平對齊方式。text-align的取值不同，元素中文本的水平對齊方式不同。
- left 把文本排列到左邊。默認值：由瀏覽器決定。
- right 把文本排列到右邊。
- center 把文本排列到中間。
- justify 實現兩端對齊文本效果。
- inherit 規定應該從父元素繼承 text-align 屬性的值。
簡單測試一下：簡單測試
通過測試可以看出，text-align:justify;效果并不是所想到的將 文本拉伸到兩端對齊，而是一種緊密的排列方式。具體可參考以下引用：
最后一個水平對齊屬性是 justify，它會帶來自己的一些問題。
值 justify 可以使文本的兩端都對齊。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然后，調整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經注意到了，兩端對齊文本在打印領域很常見。不過在 CSS 中，還需要多做些考慮。
要由用戶代理（而不是 CSS）來確定兩端對齊文本如何拉伸，以填滿父元素左右邊界之間的空間。例如，有些瀏覽器可能只在單詞之間增加額外的空間，而另外一些瀏覽器可能會平均分布字母間的額外空間（不過 CSS 規范特別指出，如果 letter-spacing 屬性指定為一個長度值，“用戶代理不能進一步增加或減少字符間的空間”）。還有一些用戶代理可能會減少某些行的空間，使文本擠得更緊密。所有這些做法都會影響元素的外觀，甚至改變其高度，這取決于用戶代理的對齊選擇影響了多少文本行。
CSS 也沒有指定應當如何處理連字符（注1）。大多數兩端對齊文本都使用連字符將長單詞分開放在兩行上，從而縮小單詞之間的間隔，改善文本行的外觀。不過，由于 CSS 沒有定義連字符行為，用戶代理不太可能自動加連字符。因此，在 CSS 中，兩端對齊文本看上去沒有打印出來好看，特別是元素可能太窄，以至于每行只能放下幾個單詞。當然，使用窄設計元素是可以的，不過要當心相應的缺點。
- text-align實際是作用在塊級元素上，使得塊級元素內的行內元素居中。
2.IE 盒模型和W3C盒模型有什么區別?
-
IE盒模型
-
W3C盒模型
由上兩張圖可以看出IE盒模型與W3C盒模型的差異在width的定義上，IE盒模型的width指的是boder的寬度+padding的寬度+content的寬度，而W3C的盒模型的width指的是width的寬度。
3.*{ box-sizing: border-box;}的作用是什么？
box-sizing屬性用來設置或檢索對象的盒模型組成模式,可以取content-box和border-box.
content-box： padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即 ( Element width = width + border + padding )
此屬性表現為標準模式下的盒模型（即W3C盒模型）。border-box： padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )
此屬性表現為怪異模式下的盒模型（即IE盒模型）。
*{box-sizing:border-box}即預設所有元素采用IE盒模型的模式。
4.line-height: 2和line-height: 200%有什么區別?
- line-height:2; 是將該元素行高（即字體底端到頂端距離）設置為自身行高的2倍；
- line-height:200%;是將該元素行高設置為其父元素高度的兩倍；
5.inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
display:inline-block:是將元素轉化為內聯塊元素，所謂內聯塊元素即是指該元素
(1)可以水平排列；
(2)可以當做一個塊元素來進行設置。如何去除縫隙可以參考
相關討論
簡單來說就是將父元素的字體大小設置為零，這樣就能去除間隙，之后再在該元素中將正常字體設置回來。高度不一樣的一樣的inline-block元素如何頂端對齊
可以采用vertical-align：top;的方式來進行設置：
簡單測試一下
根據測試結果來看，頂端對齊效果應該是指兩inline-block元素的文本頂線對齊。-
簡單引伸一下：關于line-height的幾個概念性的東西
line-height翻譯為中文即為行高，line-height實際指的是兩行文字間基線之間的垂直距離。所謂“基線”是英語中的一個概念，
基線的定義
基線.png
6.CSS sprite 是什么?
叫css精靈，是一種網頁圖片應用處理方式。將不同的圖片/圖標合并到一張圖片上。這樣可以減少網絡請求次數，提高網頁加載性能。
7.讓一個元素"看不見"有幾種方式？有什么區別?
display：none;
將元素設置為display:none后，元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪。
visibility:hidden
和display:none的區別在于，元素在頁面消失后，其占據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會重排。適用于那些元素隱藏后不希望頁面布局會發生變化的場景。
opacity:0
這種方法和visibility:hidden的一個共同點是元素隱藏后依舊占據著空間，但我們都知道，設置透明度為0后，元素只是隱身了，它依舊存在頁面中。
background-color：rgba（0，0，0，0.2）；設置背景色透明
