筆者做web前端已經做了很長時間了，常用的display屬性就是inline、block和inline-block，對於他們的特性和區別有一個大概的瞭解，但是並不全面。今天筆者寫這篇文章再來重新認識一下這三者和這三者之間的區別，再對平常使用過程中常常碰到的問題做個回顧和總結。
特性
inline：
- 使元素變成行內元素，擁有行內元素的特性，即可以與其他行內元素共享一行，不會獨佔一行
- 不能更改元素的height，width的值，大小由內容撐開
- 可以使用padding，margin的left和right產生邊距效果，但是top和bottom就不行
block：
- 使元素變成塊級元素，獨佔一行，在不設置自己的寬度的情況下，塊級元素會默認填滿父級元素的寬度
- 能夠改變元素的height，width的值
- 可以設置padding，margin的各個屬性值，top，left，bottom，right都能夠產生邊距效果
inline-block：
用通俗的話講，inline-block就是不獨佔一行的塊級元素
- 使元素變成行內元素，擁有行內元素的特性，即可以與其他行內元素共享一行，不會獨佔一行
- 能夠改變元素的height，width的值
- 可以設置padding，margin的各個屬性值，top，left，bottom，right都能夠產生邊距效果
常見問題
1，如何將內聯元素變成塊元素
-
第一種：直接修改display爲 block
將內聯元素的display屬性設置爲block之後，內聯元素就會以塊級元素的方式進行展示。獨佔一行，可以設置寬高等… -
第二種：對inline元素設置float
如下圖，當我們將world標籤設置float: right時，它的width和height設置就都起作用了
![在這裏插入圖片描述]()
-
第三種：對inline元素設置position:absolute/fixed
既然設置float能夠使inline元素變爲block，那position:absolute/fixed是否也可以呢，答案是肯定的
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
-
第四種：對inline元素的父元素設置display: flex
我發現，當我們設置inline元素的父元素爲flex時，此時inline元素也可以設置寬高了。（關於flex的詳細介紹，可以看筆者的另外一篇文章：css —— Flex佈局詳解）
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
2，inline-block佈局 vs 浮動佈局，怎麼選擇
相同點：
- 能夠達成一致的逐行排列的效果
![在這裏插入圖片描述]()
不同點：
通過上圖的對比發現，雖然他們都是逐行排列，排不下了自動換行，但是區別也是很明顯的
- float會使得父元素高度坍塌，需要將父元素設置overflow:hidden閉合浮動
- 從圖中可以看出，float元素會盡量往上靠，而inline-block元素會盡量往左靠
- inline-block元素之間會差生小的空隙，而float元素是沒有的。這個縫隙是如何產生的以及如何消除，我們看下個問題。
綜上，如果是需要逐行從行頭開始排列元素，就使用inline-block，如果需要文字環繞的效果就是用float。
3，inline-block產生的縫隙問題
縫隙產生原因：
這個問題產生的原因是換行引起的，因爲我們寫標籤時通常會在標籤結束符後順手打個回車，在下面一行繼續寫標籤，而回車會產生回車符，回車符相當於空白符。如下圖所示：
消除縫隙：
- 既然縫隙是回車產生的，那麼我們只要將所有的span標籤都寫在一行，問題自然就解決了，但是在編輯器上，一行過長，編輯起來就十分的不方便
- 我們將父元素的font-size設置爲0，然後再將span的font-size設置成我們需要的值，這樣空白地方就消失了，如下：
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
貼出以上示例的代碼，供大家嘗試：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
margin: 60px;
width: 200px;
border: 2px solid blue;
font-size: 0;
}
.item {
border: 1px solid green;
display: inline-block;
font-size: 14px;
}
</style>
</head>
<body>
<div class="border">
<span class="item">hello</span> <span class="item" style="height:40px;">world</span>
<span class="item">，</span>
<span class="item">jia</span>
<span class="item">you</span>
<span class="item">wuhan</span>
</div>
</body>
</html>
—————————————————————————
參考文章：
CSS—display詳解（作者：墨VS雪）