第三期《float 與 display:inline-block的區別是什麼》

介紹

HTML的元素有多種display屬性，比較常見的有display:none; display:block; display:inline和display:inline-block;等。

1. 默認display:block屬性（塊級元素）

<div>
<h1>...<h6>
<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>

等元素，其顯示爲block樣式，會將一行中其可用的空間給跨越佔據，容不下另一個元素與其同行。

2. 默認display:inline屬性（行內元素）

<span>
<a>
<strong>
<em>
<img>
<br>

等元素，其不會打斷文檔排布流，會在一行中一個挨一個地排列。

用float方式會帶來的麻煩：

使用float方式需要注意的是，要有一個元素來包裹float元素，同時避免接下來的元素緊緊地靠近它。

另外一個麻煩是，當有一個多行水平列表，但是列表裏的內容有不同的高度時，就會排的非常痛苦。

用display:inline-block;方式：

display:inline-block;方式樣式化列表時，既可使得列表元素能按行挨個排列，

同時元素還能保持其塊屬性，比如高和寬、上下邊距等。

但是對有不同高度內容的元素時，通常要設置對齊方式如vertical-align: top;來使元素頂部對齊。

用display:inline-block;的瀏覽器兼容：

CSS中使用display:inline-block;來樣式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。

但是在早期的IE，比如IE 7，就要做一些改變才能適應。

/* For IE 7 */
 zoom: 1;
 *display: inline;

通常，做瀏覽器兼容適應的CSS樣式化，最好是分開獨立的樣式文件，然後通過條件註釋將其引入。

用display:inline-block;的空白符引起的問題：

因爲元素之間是行內inline修飾排列的，因此HTML中的空格符也會影響到這個修飾。也就是說，

當我們把元素的大小和順序排列好後，如果在<li>元素之間有空格符，

這個空格符將會產生4px的邊距。

綜述

1. 用display:inline-block;來實現水平列表比用float方式更容易控制，需要注意的是前者會由空格符帶來邊距影響。

2. inline-block默認是底部對齊的，要讓兩個元素頂部對齊，需要加上一句：veritcal-align:top;

3. inline-block 的寬度可以自行設置的，而inline的自行設置寬度是無效的。

參考資料:

1. css之display:inline-block與float區別

微信訂閱號（前端趣聞，歡迎關注）

討論地址：github討論地址