1.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align: center可以讓父元素中的內(nèi)容水平居中，作用在塊元素上使行內(nèi)內(nèi)容水平居中。
2. IE 盒模型和W3C盒模型有什么區(qū)別?
IE 盒模型和W3C盒模型的區(qū)別在于計算盒模型寬高的方式不一樣。給某一盒模型設置寬高：
- 如果該盒模型是W3C盒模型：
設置的寬度=內(nèi)容的寬度
設置的高度=內(nèi)容的高度 - 如果該盒模型是IE盒模型：
設置的寬度=內(nèi)容寬度+左右padding值+邊框?qū)挾?br> 設置的高度=內(nèi)容高度+上下padding值+邊框?qū)挾?/li>
3. { box-sizing: border-box;}的作用是什么？
{ box-sizing: border-box;}的作用是讓所有元素的盒模型寬高的計算方式都按照IE盒模型寬高的計算方式去計算。
4.寫一個 btn 的class， 任何 a，span,div,button
)
添加此class后后變成如下按鈕的樣式(鼠標hover背景色#c14d21
, 鼠標按下背景色#e25f31
5. inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
- inline-block的特性有以下幾點：
- inline-block元素可以設置寬高和上下左右的padding和margin。
- inline-block元素并排排列
- inline-block元素默認寬高為內(nèi)容寬高
方法一:標簽連寫(刪除空格不換行)
方法二: 父級元素font-size 設為0,再重新給inline-block元素設置font-size
方法三:設置浮動
高度不一樣的inline-block元素頂端對齊
-
通過設置vertical-align:top;樣式對齊
未對齊
![設置vertical-align:top;樣式后]
](http://upload-images.jianshu.io/upload_images/3889793-c774050e34051562.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6.CSS sprite
CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字精確的定位出背景圖片.
CSSSprites在國內(nèi)很多人叫css精靈，是一種網(wǎng)頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網(wǎng)絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
7. 讓一個元素"看不見"有幾種方式？有什么區(qū)別？
opacity: 0：元素透明度為0，還占有位置；
visibility: hidden：與opacity: 0類似；
display: none：元素消失，不占位置；
background-color: rgba(0,0,0,0.2)：背景色透明。
