一、背景
初學html，接觸很多標簽
<h1>、<p>、<span>、<ul>、<em><h1><p><em><em><p><em><h1>
二、標簽的類型（顯示模式）
想要知道為何不同，得先了解HTML標簽的類型。
HTML標簽一般分為塊標簽和行內標簽兩種類型，也可以稱為塊元素和行內元素。
上面舉例中的
<h1><em>三、塊級元素（block-level）
塊元素會獨自占據一整行，或者多行，可以任意設置其大小尺寸，是用于搭建網頁布局的必須部分，使網頁結構更加緊湊合理。
塊級元素有以下幾個特點：
- 總是另起一行（特立獨行）
- 可以設置其寬度、高度，內外邊距
- 在不手動設置寬度的情況下，寬度默認為所在容器的100%（即容器寬度）
- 可以容納行內元素和其他塊元素。
常見的塊級元素有：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的塊級元素。
特殊：文字類的塊級元素不能放塊元素，例如
<p>/<h1>~<h6>/<dt>?/*塊元素div*/
div{
????width:?200px;???????/*寬高、外邊距、內邊距?都有效*/
????height:?30px;
????border:1px?solid?blue;
????margin:20px;????????
????/*????padding:10px;*/???/*此處內邊距會引起div寬高的變化，為了比較更直觀就注釋了*/
????line-height:?30px;
}
使用以上樣式給下面塊元素div設置
<div>我是塊元素2</div>
<div>我是塊元素2</div>
效果圖見文末。
四、行內元素（inline-level）
行內元素也稱為內聯元素，行內元素不占有獨立區域，其大小僅僅被動的依賴于自身內容的大小（例如文字和圖片），所以一般不能隨意設置其寬高、對齊等屬性。常用于控制頁面中文本的樣式。
行內元素的特點：
- 總是和相鄰的行內元素在同一行上（物以類聚）
- 設置寬高無效，水平方向的padding和margin屬性可以設置，但是垂直方向上的無效。
- 默認寬度是他自身內容的寬度。
- 行內元素只能容納其他行內元素或者文本。
特殊：a比較特殊，可以放塊級元素，但是鏈接里面不能再放鏈接。
/*行內元素span*/
span{
????width:200px;????????/*寬度設置無效*/
????height:?100px;??????/*高度也無效*/
????border:1px?solid?red;
}
下面是Html樣式
<span>行內元素1</span>
<span>行內元素2</span>
<span>行內元素3</span>
<span>我是行內元素行內元素行內元素4</span>
效果圖見文末
五、行內塊元素（inline-block）
普遍的規則里總有那么幾個不一樣的，在行內元素中就有那么幾個特殊標簽，比如
<img>/<input>/<td>行內塊元素的特點：
- 和相鄰行內元素在同一行，但是之間會有空白縫隙。
- 默認寬度是他本身內容的寬度。
- 寬度、高度、行高、外邊距以及內邊距都可以手動設置。
樣式：
/*行內塊元素input*/
input{
????width:?200px;??????/*寬高均有效*/
????height:?30px;
}
結構：
<input?type="text"?value="行內塊元素1">?
<input?type="text"?value="行內塊元素行內塊元素2行內塊元素">
綜合效果圖如下：
六、標簽顯示模式轉換（display）
既然標簽有不同的顯示模式，就會有相應的轉換辦法以應對各種需要。
display正是我們想要的。
塊元素——>行內元素 ： display:inline;
行內元素——>塊： display:block;
塊、行內元素——>行內塊： display: inline-block;
總結
總結完他們之間的特點更加清晰，記得更牢，首先在以后遇到當給一個元素設置的寬高無效的時候這就是一個原因，使用display即可解決。
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=iikihkj&title=行內元素和塊元素以及行內塊元素的特點
 Docker Machine和Docker Swarm...)
)
)