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

使塊級元素內容水平居中；也可以使行內元素水平居中。

IE 盒模型和W3C盒模型有什么區別?

111.jpg

• IE盒模型-范圍含有 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。（ie6,7,8）瀏覽器中如果不加dctype html聲明則瀏覽器會默認使用IE盒模型。
• W3C標準盒模型-范圍含有 margin、border、padding、content，并且 content 部分不包含其他部分。

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

• box-sizing:border-box; 是CSS3新增屬性，了解這個屬性，我們先從塊級元素的盒子大小說起，通常一個塊級元素實際所占寬高度=外邊距（margin）+ 邊界寬度(border-width) + 內邊距（padding）+ 高度（height） / 寬度（width）
  如果設置了border-box，實際所占寬高度 = 設置的高度（height）/ 設置的寬度（width）+ 外邊距（margin）。
  使得排版更加方便計算。

line-height: 2和line-height: 200%有什么區別?

• 不加單位的line-height是相對于各個元素本身的文字大小，這里設置為2是設置各個元素的line-height的兩倍。
• 加單位的line-height是相對于父容器的文字大小。

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

• 既呈現inline屬性（不占據一整行，寬度由內容決定）；又呈現block屬性（可設置寬高，內外邊距）。
• 去除縫隙:可以刪除inline-block元素HTML代碼之間空隙。也可以在外層加一個父容器(例如:div)，然后設置這個父容器的font-size:0即可。(注意要在inline-block元素中重新定義字體大小)
• 高度不一樣，可以設置vertical-align: top；某些情況下可以直接用浮動。(注意清浮動)

CSS sprite 是什么?

CSS精靈圖(俗稱雪碧圖)。是一種網頁圖片應用處理方式，就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位。

其優點在于：

• 減少網頁的http請求，提高性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
• 減少圖片的字節：多張圖片合并成1張圖片的字節小于多張圖片的字節總和；
• 減少了命名困擾：只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高制作效率；
• 更換風格方便：只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便。

誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點：

• 圖片合成比較麻煩；
• 背景設置時，需要得到每一個背景單元的精確位置；
• 維護合成圖片時，最好只是往下加圖片，而不要更改已有圖片；
• 無法縮放。

讓一個元素"看不見"有幾種方式？有什么區別?

• display:none 元素不可見，也不占用頁面上的空間。
• visibility:hidden 即使不可見的元素也會占據頁面上的空間。
• opacity:0; 設置元素的透明度為0，而且會占用頁面空間。(為了兼容IE也會在后面加上filter:alpha(opacity=0))
• background:rgba(0,0,0,0) 設置背景色為透明。(僅對無內容的元素)
• height:0;overflow:hidden 直接設置高度為零，簡單粗暴。