一、text-align: center的作用是什么鹿榜，作用在什么元素上芝囤？能讓什么元素水平居中
text-align: center是讓其子元素或者文本水平居中，該樣式可繼承关贵。作用在行內元素、內聯(lián)塊狀元素卖毁、文本上揖曾，并讓它們水平居中。
二亥啦、IE 盒模型和 W3C 盒模型有什么區(qū)別?
首先炭剪，盒子指的是 HTML 中所有的元素，盒子模型就是這些元素占據(jù)空間的規(guī)則翔脱。盒子由四個部分組成
content（內容）padding（內邊距）border（邊框）margin（外邊距）奴拦。接下來就區(qū)分一下兩種盒子模型：
1. IE 盒模型
IE 盒子對于寬高的計算是
width = contentX + paddingLeft + paddingRight + borderLeft + borderRight
height = contentY + paddingTop + paddingBottom + borderTop + borderBottem
什么意思呢？就是說届吁，當你定義了一個
<div>的width: 200px;height: 200px時错妖，這里就默認包含了padding和border為 0 。之后增加padding和border時疚沐，都是往里面擠了暂氯。
2. W3C 盒模型
W3C 盒子寬高是
width = contentX
height = contentY
所以說， W3C 盒模型寬高只和本身內容有關亮蛔，當你后續(xù)添加
padding和border時痴施，它就會往外擠。
3. 總結
相對來說， W3C 盒模型更符合我們的認知辣吃，寬高就應該由內容決定嘛动遭，與其他屬性掛什么鉤。但在實際使用上神得，反而 IE 盒模型更方便厘惦。舉個例子：
<style>
div {
display: inline-block;
margin: 0 20px;
vertical-align: top;
color: #fff;
text-align: center;
}
.div1 {
box-sizing: content-box;
width: 200px;
height: 200px;
background-color: red;
border: 5px solid #000;
padding: 20px;
}
.div2 {
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: green;
border: 5px solid #000;
padding: 20px;
}
.div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div class="div1"> W3C 盒子</div>
<div class="div2">IE 盒子</div>
<div class="div">盒子，只有寬高</div>
在上面的例子可以看到循头，當使用 W3C 盒模型時绵估，容器最后占據(jù)的空間會隨著
padding、border和margin增大而增大卡骂；使用 IE 盒模型時国裳，容器最后占據(jù)的空間只隨margin增大而增大。兩者相比全跨，IE 盒模型明顯更好控制缝左，我只需要知道margin，就可以為這個容器布局了浓若；而 W3C 盒模型還需要你去計算最終占據(jù)空間大小content + padding + border + margin渺杉，太麻煩。因此挪钓，開發(fā)中往往更喜歡用 IE 盒模型是越。
三、*{ box-sizing: border-box;}的作用是什么碌上？
設置所有容器為 IE 盒模型倚评。
四、line-height: 2和line-height: 200%有什么區(qū)別?
line-height: 2不帶單位的行高馏予，是繼承父元素的縮放因子天梧，子元素的行高等于自身字體大小的倍數(shù)，lineHeight = selfFontSize * n霞丧。line-height: 200%帶上單位的行高呢岗，是直接繼承父元素的行高，子元素的行高為lineHeight = parentFontSize * n蛹尝，以上后豫。
五、inline-block有什么特性突那？如何去除縫隙硬贯？高度不一樣的inline-block元素如何頂端對齊?
當用戶想讓元素在同一行顯示，但又能設置寬高時陨收，就用
inline-block饭豹⊥依担縫隙的存在是因為空白字符的存在，正常情況下拄衰，瀏覽器會把連續(xù)的空白字符合并成一個它褪，所以這里就有一個小小的空白。一個解決辦法是在父元素設置字體為零翘悉，因為哪怕是空白字符也是字體茫打，設置為 0 之后，就不占空間了妖混。然后再在具體的inline-block里面再設置字體大小老赤，如下：
<style>
div {
font-size: 0;
}
span {
border: 1px solid;
font-size: 16px;
}
</style>
<div>
<span>1</span>
<span>2</span>
</div>
用了
inline-block之后，就有一個新的 CSS 屬性可以使用了：vertical-align制市，類似與text-align抬旺，不過是垂直方向的，常用有三個值topmiddlebottom祥楣，分別是頂端對齊开财、垂直居中、底部對齊误褪。
六责鳍、CSS sprite 是什么?
CSC sprite，CSS 精靈圖兽间，江湖人稱雪碧圖历葛。是為了減少小圖片、小圖標的請求次數(shù)嘀略，而把這些合并到一張圖片的技術恤溶，這樣可以減少不必要的請求。在使用上配合
background-size: x y來對這張合并圖位移屎鳍，選中需要的小圖。缺點是：1.無法二次調整小圖的尺寸问裕。2.需要知道每張小圖的位置逮壁。
七、讓一個元素"看不見"有幾種方式粮宛？有什么區(qū)別?
- 保留元素位置
div {
/* 選擇讓元素 可見 還是 不可見 */
visibility: hidden;
/* 透明度窥淆，剛好透明度為 0 的時候，相當于不可見 */
opacity: 0;
}
- 不再保留元素位置巍杈。
div {
/* 相當于當前元素不再存在 */
display: none;
}
