inline、block、inline-block各自的特色與區別

可以使用display屬性來切換這三種狀態：display：inline(默認) / block / inline-block;

參考了CSDN一個博主的文章：

（版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接和本聲明。本文連接：https://blog.csdn.net/zhanglir333/article/details/79178370

），

有了如下的理解與收穫。

　　一、行內元素    inline

表明元素：span

特徵：

（1）大小由文本的大小（font-size）決定，手動設置寬高(width,height)是沒有用的；

（2）（除width,height外）設置的樣式，只在本行內的水平方向上（即left+right）有效果有做用：如paddin,margin,border;

　　在垂直方向上（即top+bottom）有效果但無做用，如：padding,margin,border。（有做用即對其上下左右元素有影響的）

（3）排列方式：從左到右（元素先後沒有換行符）；

　　二、塊狀元素：

表明元素：div

特徵：

（1）能夠手動設置寬高；

（2）設置的樣式在水平和垂直方向上都有效果且有做用。

（3）排列方式：從上到下（塊狀元素先後會帶有換行符）；

　　三、行內塊元素：

特徵：

（1）能夠手動設置寬高；

（2）設置的樣式都有效果有做用；

（3）元素排列方式：從左到右；

***行內塊元素和塊狀元素有什麼區別？

　　行內塊元素有塊狀元素的樣式設置全有效有做用，有行內元素的排列方式，能夠當作是行內元素和塊狀元素的改良中和版。即除了排列方向與塊狀元素不一樣以外，其餘基本一致。

注意：外邊距合併問題

當兩個盒子垂直相遇時，在上面的盒子的margin-bottom和下一個鄰近盒子的margin-top合併，最終只保留最大值顯示，並不會進行累加顯示。 使用一個上下邊距爲10px和上下邊距爲30px的盒子進行測試，代碼以下： <style> * { margin:0; } .on { width: 100px; height: 100px; background-color: pink; margin:10px 0; } .down { width: 100px; height: 100px; background-color: red; margin:30px 0; } </style> <div class="on"></div> <div class="down"></div> 最終結果是，兩個盒子垂直方向的距離只有30px，沒有疊加成40px。顯示效果爲：

 

 

 

 

	inline	block	inline-block
水平方向	√	√	√
垂直方向	Χ	√	√
排列方式	左-->右	上-->下	左-->右
√：表明	表示該方向上設置的樣式對該元素有效果		對該方向上的相鄰元素有影響
Χ：表明			對該方向上的相鄰元素沒影響

總結：inline-block是inline和block的中和改良。