css學習筆記二之inline-block

一、inline-block是CSS2.1中新增的盒類型，在div中將display屬性設定爲"inline-block"，則div顯示效果與設置display屬性爲"inline"是同樣的效果。

inline-block具備inline屬性的列屬性，內部又具備block屬性的塊屬性，可使用width,height,margin,padding,border等元素。

二、使用inline-block能夠在某些狀況下替代float浮動元素，PS：要作一個橫向導航條

在inline-block出現以前，通常都是使用如下代碼，來完成上述功能：

<div class="nav">
    <ul>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
        <li><a href="">AngularJS</a></li>
    </ul>
</div>

li {
    float: left;
    list-style: none;
    width: 100px;
    padding: 10px 0;
}

而使用inline-block，則能夠經過以下代碼完成：

li {
	display: inline-block;
	width: 100px;
	padding: 10px 0;
	text-align: center;
}

　關於二者的區別，在於float脫離文檔流，如果須要文字環繞，則應該選擇float元素，若須要讓nav居中，或垂直對齊，則須要用inline-block。

　而在使用inline-block時，如果給上述li元素加上邊框，則會發現左右有空白出現，這時有何解決方法呢？如今讓咱們來看看解決方法：

1.  刪除html中的空白：不要讓元素之間換行，這可能比較蛋疼，但也是一種方法，特別是你元素很少的時候。
2.  使用負邊距：你能夠用負邊距來補齊空白。但你須要調整font-size，由於空白的寬度與這個屬性有關係。我認爲是0.25em，但我不肯定。若是有人知道能夠留言告訴我。
3.  給父元素設置font-size:0：無論空白多大，因爲空白跟font-size的關係，設置這個屬性便可把空白的寬度設置爲0.在實際使用的時候，你還須要給子元素從新設置font-size。