1.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
text-align:center是規(guī)定元素中的文本水平居中，作用于塊級元素上，使行內(nèi)元素水平居中
若元素設置了display:block，則用“margin:xxpx auto;”來設置居中
2.IE盒模型和W3C盒模型有什么區(qū)別
Paste_Image.png
W3C盒模型設置的寬高，是content的寬高，不包含padding和border
Paste_Image.png
IE盒模型設置的寬高，包含padding和border
3.{ box-sizing: border-box;}的作用是什么？
| 值 | 描述 |
|---|---|
| content-box | 這是由 CSS2.1 規(guī)定的寬度高度行為。 寬度和高度分別應用到元素的內(nèi)容框. 在寬度和高度之外繪制元素的內(nèi)邊距和邊框。 |
| border-box | 為元素設定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設定的寬度和高度內(nèi)進行繪制。 通過從已設定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。 |
| inherit | 規(guī)定應從父元素繼承 box-sizing 屬性的值 |
- box-sizing: content-box：w3c標準盒模型
- box-sizing: border-box：“IE盒模型”
4.line-height: 2和line-height: 200%有什么區(qū)別?
line-height設置單行文本的行高
2是本身文字高度2倍，200%是父元素文字高度的兩倍
- height = line-heihgt ——垂直居中單行文本
5.inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
inline-block既呈現(xiàn)inline的特性，也呈現(xiàn)block的屬性
inline：不占據(jù)一整行，寬度由內(nèi)容寬度決定
block：可設置元素寬高、邊框產(chǎn)生縫隙原因是因為HTML里，兩個元素之間有空白，換行空格等，都被瀏覽器當做一個空白字符。
消除方法：
- 在包裹兩個縫隙元素的div中，設置字體大小為0，這樣空白字符高度為0；
- 在各自元素樣式中再設置字體大小
- 設置了inline-block的元素，具有行內(nèi)元素的特點，是以文字下面的基線來對齊的，可以通過設置vertical-align：top/bottom來調(diào)節(jié)是在頂部還是底部對齊
6.CSS sprite 是什么?
CSS sprite 是指將眾多圖標、圖片合成到一張圖片上，用于網(wǎng)頁的圖片圖標使用的圖片。
通過CSS樣式，指定圖片的寬高位置，可展現(xiàn)出需要的圖標和圖片。
這種方式的優(yōu)點在于減少了網(wǎng)絡請求，多個圖片、圖標，只需要進行一次網(wǎng)絡請求即可。
缺點，無法縮放，不好修改
7.讓一個元素"看不見"有幾種方式？有什么區(qū)別?
有兩個方式：
- “透明”
看不見元素，但瀏覽器直到元素的存在，元素占用位置；
opacity: 0 ; 從 0.0 （完全透明）到 1.0（完全不透明）。
visibility: hidden ; 和opacity:0 類似，
- “隱藏”
不顯示元素，元素不占用
display:none; 消失，不占用位置
