html標籤塊元素、行元素、行內塊元素區分
區分
-
塊元素（block）
塊元素簡單來說就是獨佔一行，並且可以設置width和height，就像一個方塊一樣可以有自己的寬和高。如果沒有設置width，那麼塊元素的width默認和父容器的width保持一致。如果沒有設置height，那麼塊元素的height默認爲0,塊元素的高由內部元素支撐起來。
常見的塊元素有：div、p、h1–h6、hr、ul、li… -
行元素（inline）
行元素簡單來說就是在一行上顯示，設置寬高是無效的。高度可以被內部內容撐開。
常見的行元素有：span、a、b、s… -
行內塊元素（inline-block）
看這個inline-block名字，就可以看出來這個是結合塊和行的一部分特點，行內塊元素：在一行上顯示，但是可以設置寬高。
常見的行內塊元素有：Img、input…常見用法
-
inline-block
我們經常使用ul結合li標籤做一個橫向菜單列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
這個時候我們可以設置li的display:inline-block,讓li橫起來。
閒的無聊的發現
我們知道塊元素可以嵌套塊、行、行內塊的（p標籤除外），行內元素不能嵌套只能嵌套行，行內塊可以嵌套行、行內塊。
我測了一下，行內塊鑲嵌行內塊時候，有一個讓人很驚喜的發現。
<body>
<div style="margin:0;">
<div style="display: inline-block;border:1px solid red;width:50%;height: 300px;">
<div style="display: inline-block;border:1px solid black;width:100%;height: 50%;">2</div>
</div>
<div style="display: inline-block;border:1px solid green;width:40%;height: 300px;">3</div>
</div>
</body>
大概就是上面哪個樣子，兩個同級的div，都是inline-block。然後第一個inline-block裏面鑲嵌了一個div，也是設爲inline-block。
然後再第一個大div裏面加了一個span（行元素）
<body>
<div style="margin:0;">
<div style="display: inline-block;border:1px solid red;width:50%;height: 300px;">
<span>1</span>
<div style="display: inline-block;border:1px solid black;width:100%;height: 50%;">2</div>
</div>
<div style="display: inline-block;border:1px solid green;width:40%;height: 300px;">3</div>
</div>
</body>
開始兩個並排的div？？？？
把span標籤換成一個input（行內塊元素），還是一個樣子。
div2和div3保持一行？？？
其實這也是一種對其，因爲有個baseline（基線）；
span和input的基線和div2是對齊的，所以纔有上面哪個圖。
然後再改一波代碼：
<body>
<div style="margin:0;">
<div style="display: inline-block;border:1px solid red;width:20%;height: 300px;">
<input type="text" />
<div style="display: inline-block;border:1px solid black;width:100%;height: 50%;">2</div>
</div>
<div style="display: inline-block;border:1px solid green;width:20%;height: 300px;">3
</div>
<div style="display: inline-block;border:1px solid green;width:20%;height: 300px;">4</div>
<div style="display: inline-block;border:1px solid red;width:20%;height: 300px;">
<input type="text" />
<div style="display: inline-block;border:1px solid black;width:100%;height: 50%;">5</div>
</div>
</div>
</body>
這跟醜醜的紅色線，就是他們對齊的基線。
所以知道了它層次不齊的原因，那就知道改怎麼改了。
設置vertical-align:top;，對齊它
<body>
<div style="margin:0;">
<div style="display: inline-block;border:1px solid red;width:20%;height: 300px;vertical-align:top;">
<input type="text" />
<div style="display: inline-block;border:1px solid black;width:100%;height: 50%;vertical-align:top;">2</div>
</div>
<div style="display: inline-block;border:1px solid green;width:20%;height: 300px;vertical-align:top;">3
</div>
<div style="display: inline-block;border:1px solid green;width:20%;height: 300px;vertical-align:top;">4</div>
<div style="display: inline-block;border:1px solid red;width:20%;height: 300px;vertical-align:top;">
<input type="text" />
<div style="display: inline-block;border:1px solid black;width:100%;height: 50%;vertical-align:top;">5</div>
</div>
</div>
</body>
就是這個樣子了。
或者你可以乾脆把display設爲block；