一、text-align:center的作用是什么？作用在什么元素上？能讓什么元素水平居中？
text-align:center是用來使行內(nèi)元素水平居中的。
background-size（css3的規(guī)范，可能會有瀏覽器兼容的問題）是設(shè)置背景圖片尺寸，background-size: contain;縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白；而background-size: cover;縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見。
二、IE 盒模型和W3C盒模型有什么區(qū)別？
W3C標準中padding、border所占的空間不在width、height范圍內(nèi)。width、height直接指定content的寬高。
IE的盒模型width包括content尺寸＋padding＋border。
三、*{ box-sizing: border-box;}的作用是什么？
如果使用w3c盒模型，一般我們就需要設(shè)置其margin和padding，而IE就不需要設(shè)置margin了，padding如果有需要再設(shè)置。所以，看起來IE盒模型使用更方便，但是目前的瀏覽器都采用W3C標準盒模型，為了方便，在CSS3中引入了新樣式box-sizing其值有 border-box表示使用“IE盒模型”和content-box：表示使用w3c標準盒模型。
四、line-height: 2和line-height: 200%有什么區(qū)別?
line-height:該屬性會影響行框的布局。在應(yīng)用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。
line-height: 2，2就是行間距當前字體放大兩倍。
line-height: 200%，200%是行間距基于當前字體大小而放大2倍。
line-height:percentage，是原始數(shù)字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值，與元素自身的字體大小有關(guān)。計算值是給定的百分比值乘以元素計算出的字體大小。使用Percentage和em可能會帶來意想不到的結(jié)果（特別是當父級元素下的子元素字體大小不同時）。
line-height:number，該屬性的應(yīng)用值是這個無單位數(shù)字number乘以該元素的字體大小。計算值與指定值相同。大多數(shù)情況下，使用這種方法設(shè)置line-height是首選方法，在繼承情況下不會有異常的值。
對于替代行內(nèi)容，如button或者input，若line-height=height，在可以達到垂直居中的作用。
五、inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
inline-block既呈現(xiàn) inline 特性(不占據(jù)一整行，寬度由內(nèi)容寬度決定)，又呈現(xiàn) block 特性 (可設(shè)置寬高，內(nèi)外邊距，注：對inline設(shè)置上下內(nèi)外邊距無效。)，但是會有縫隙問題。
如果縫隙產(chǎn)生的原因是空格，則可以通過取消行內(nèi)元素之間的空格；其次還可以指定其父級元素font-size：0；即設(shè)置字的大小為0，再通過指定子元素樣式覆蓋其父級元素，還原字體大小，但沒有被指定的元素（也就是產(chǎn)生縫隙的地方）卻沒有還原。
不同元素高度不一樣，可以通過vertical-align：bottom元素及其后代的底端與整行的底端對齊/top元素及其后代的頂端與整行的頂端對齊。
CSS 的屬性 vertical-align 用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。
六、css sprite是什么？
css sprite俗稱雪碧圖，規(guī)范的叫法是css精靈圖。是指將不同的圖片/圖標合并在一張圖上，還會自動生成css樣式。使用CSS Sprite 可以減少網(wǎng)絡(luò)請求，提高網(wǎng)頁加載性能，更方便展示圖片直接使用生成樣式。在這個網(wǎng)站直接就可以實現(xiàn)：http://spritegen.website-performance.org/
當然，由于圖片是結(jié)合在一起，使用其缺點就是在網(wǎng)頁上無法對圖片進行縮放；也不能隨便修改，否則位置可能會有相對的變化。
七、讓一個元素"看不見"有幾種方式？有什么區(qū)別?
讓一個元素“看不見”，即隱藏起來，我們可以通過設(shè)置css屬性，有四種屬性方式：
1、opacity：透明度，其值可以是從0~1，顧名思義0就是完全透明，1就是不透明。
2、visibility：hidden；和opacity：0；類似。
3、display：none；意即不展示，也不占用位置。
4、background-color： rgb（0，0，0，0.2），其中0.2是透明度，類似opacity；前面三個0，是設(shè)置背景色。但只是背景色透明。
八、Demo
方法1、用css sprites制作效果(http://js.jirengu.com/fobebivula/1/edit?html,css,output)
方法2、用image方法制作效果，這個方法比較老，就是試一試，但是圖片背景色是黑色是因為圖片本身的背景圖層就是黑色，用ps就可以改掉。（http://js.jirengu.com/xehamuhafi/1/edit?html,css,output）
方法3、使用字體圖標實現(xiàn)效果(http://js.jirengu.com/wevajurizo/1/edit?html,css,output)
步驟：
a、首先在Iconfont-阿里巴巴矢量圖標庫找到饑人谷圖標。
b、把添加到購物車，生成在線鏈接，復(fù)制在線鏈接到j(luò)s.jirengu.com。
c、復(fù)制的代碼就是對圖標字體的一種聲明，然后使用字體，由于字體比較小，主意指定字體的大小，也可以改變字體的顏色。
d、通過狀態(tài)選擇器E：hevor匹配鼠標放置上的顏色。
總結(jié)：方法2生產(chǎn)效率低，請求多，不推薦使用了。方法一和方法三類似，都可以自動生成代碼。
區(qū)別在于方法一還需要調(diào)整圖片相對位置，如果位置控制的不好，會出現(xiàn)圖片在兩個狀態(tài)下，位置發(fā)生變化。另外方法一還會有縮放的問題，更改背景大小，就可能會變化背景圖片出現(xiàn)的像素的大小。
但是方法三是把圖片當成字體，需要對字體進行聲明調(diào)用，更容易達到“變色”效果。
待更新svg方法····
