text-align: center的作用是什么，作用在什么元素上宋税？能讓什么元素水平居中
text-align屬性通過指定行框與哪個(gè)點(diǎn)對齊摊崭，從而設(shè)置塊級元素內(nèi)文本的水平對齊方式。text-align:center 設(shè)置文本或img標(biāo)簽等一些內(nèi)聯(lián)對象（或與之類似的元素）的居中弃甥。
IE 盒模型和W3C盒模型有什么區(qū)別?
ie678怪異模式（不添加 doctype）使用 IE盒模型爽室，寬度=邊框+padding+內(nèi)容寬度。
chrome淆攻， ie9+, ie678(添加 doctype) 使用W3C盒模型， 寬度= 內(nèi)容寬度
- W3C 盒子模型的范圍包括 margin嘿架、border瓶珊、padding、content耸彪，并且 content 部分不包含其他部分伞芹。
- 和標(biāo)準(zhǔn) W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding。
{ box-sizing: border-box;}的作用是什么蝉娜？
-
box-sizing屬性唱较，允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。
再來看看box-sizing屬性給出的幾個(gè)值：
因此召川，
*{ box-sizing: border-box;}的作用是對所有元素應(yīng)用IE盒模型南缓，指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。
line-height: 2和line-height: 200%有什么區(qū)別?
- line-height:2指行高為文字大小的2倍;line-height: 200%則行高為父元素文字大小的2倍荧呐。
inline-block有什么特性汉形？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
- inline-block呈現(xiàn)行內(nèi)元素的特性倍阐，不占據(jù)一整行概疆，寬度大小由內(nèi)容決定，同時(shí)又有塊級元素的特性峰搪，可設(shè)置寬高和內(nèi)外邊距岔冀。
如何去除縫隙：
（1）移除標(biāo)簽間的空格
元素間的間隙出現(xiàn)的原因是元素標(biāo)簽之間的空格，把空格去掉間隙自然就會消失概耻。有以下幾種寫法：
1:
<div class="demo">
<span>饑人谷</span><span>饑人谷</span><span>饑人谷</span><span>饑人谷</span>
</div>
2:
<div class="demo">
<span>饑人谷
</span><span>饑人谷
</span><span>饑人谷
</span><span>饑人谷</span>
</div>
3:利用HTML注釋標(biāo)簽
- 3.1
<div class="demo">
<span>饑人谷</span><!--
--><span>饑人谷</span><!--
--><span>饑人谷</span><!--
--><span>饑人谷</span>
</div>
- 3.2
div class="demo">
<span>我是一個(gè)span
<span>我是一個(gè)span
<span>我是一個(gè)span
<span>我是一個(gè)span</span>
</div>
.demo span{
background:#ddd;
display: inline-block;
}
為了兼容IE6/IE7使套，最后一個(gè)標(biāo)簽需要閉合。
3.3 我們這里推薦使用另一種方法：
在CSS中設(shè)置父容器字體大小為0咐蚯，對子元素再設(shè)置字體大小為正常童漩，代碼如下：
HTML
<div class="nav">
<span class="box">hellow</span>
<span class="box">jirengu</span>
</div>
.nav{
background-color: yellow;
text-align: center;
font-size: 0;
}
.box{
display: inline-block;
margin: 20px 0;
border: 1px solid red;
padding: 10px;
font-size: 1rem;
}
對齊方式
當(dāng) inline-block 的高度不一樣的時(shí)候，就需要我們?nèi)ピO(shè)置對齊方式春锋；
- 頂端對齊：
vertical-align: top; - 中部對齊：
vertical-align: middle; - 底部對齊：
vertical-align: bottom;
實(shí)例
