1.text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中？
- 是塊級元素中的行內內容水平居中
- 作用在block-level元素上（包括block和inline-block）
- 能block-level的元素中的行內元素，替換元素和inline-block元素居中。
- 備注： 替換元素是瀏覽器根據其標簽的元素與屬性來判斷顯示具體的內容。比如：
<input /> type="text"，這是一個文本輸入框，換一個其他的時候，瀏覽器顯示就不一樣(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素，這些元素都沒有實際的內容。
- 備注： 替換元素是瀏覽器根據其標簽的元素與屬性來判斷顯示具體的內容。比如：
2.IE 盒模型和W3C盒模型有什么區(qū)別?
IE的盒模型與W3C盒模型的區(qū)別在與width的計算
W3C盒模型：width，height不包括padding和border
IE盒模型： width，height包括內尺寸+padding+border
Paste_Image.png
3.*{ box-sizing: border-box;}的作用是什么？
作用就是使瀏覽器使用IE的盒子模型，即width，height包括內容尺寸+padding+border
4.line-height: 2和line-height: 200%有什么區(qū)別?
-
line-height: 200%先換算成px，子元素再繼承
<div style="line-height:200%;font-size:32px"> 200%*32 = 64
<p style="font-size:24px;">行間距</p> // p行高為64px
</div>
-
line-height: 2為先繼承，再換算成px。子元素繼承父元素的數字，然后當前的字體尺寸相乘來設置行間距。
<div style="line-height:2;font-size:32px">
<p style="font-size:24px;">行間距</p> // 2*24 行高為48px
</div>
5.1inline-block有什么特性？
- 既呈現 inline 特性(不占據一整行，寬度由內容寬度決定),又呈現 block 特性 (可設置寬高，內外邊距)
5.2如何去除inline-block之間的縫隙？
-
移除空格
元素間留白間距出現的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就沒有了 - 使用margin負值
.space a {
display: inline-block;
margin-right: -3px;
}
margin負值的大小與上下文的字體和文字大小相關,例如，對于12像素大小的上下文，Arial字體的margin負值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。由于外部環(huán)境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規(guī)模使用。
- 使用font-size:0
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}
5.3高度不一樣的inline-block元素如何頂端對齊?
vertical-align:top;
6.CSS sprite 是什么?
是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。
-
優(yōu)點 ：
- 能很好地減少網頁的http請求，從而大大的提高頁面的性能
- 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變
-
缺點
- CSS sprite不能過大不然下載時間會太長
7.讓一個元素"看不見"有幾種方式？有什么區(qū)別?
-
opacity: 0透明度為0，占用空間，你看不到它，但你不能點擊它后面的元素。 -
visibility: hidden和opacity:0 類似,占用空間，你可以點擊它后面的元素。 -
display:none該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
