關於塊級元素和行內元素的總結（面試常考）
目錄
一、前言
二、塊級元素
1、塊級元素的定義
2、塊級元素的特點
3、常見的塊級元素
三、行內元素
1、行內元素的定義
2、行內元素的特點
3、常見的行內元素
四、塊級元素和行內元素的區別和轉換
參考文件
一、前言
由於塊級元素和行內元素在HTML這一塊屬於非常基礎且重要的內容，雖然平時經常用到但是對它的概念和區別還是有點模糊，所以本文主要是對這兩者的概念、區別以及轉換做一個梳理和總結。這也是面試常考的點哦！
二、塊級元素
1、塊級元素定義
塊級元素佔據其父元素（容器）寬度的整個空間，因此建立了一個“塊”。
通常瀏覽器會在塊級元素前後另起一個新行。
塊級元素只能出現在<body>內。
2、塊級元素的特點
- 不能與其他任何元素並列。
- 能接受寬高，如果不設定寬度，那麼寬度將預設變為父級的100%。
- 可以容納內聯元素和其他塊元素
例如：
CSS程式碼：
*{margin:0;
padding:0;
}
.father {
width: 250px;
height: 250px;
background-color: #c3deb7;
}
.son {
background-color: #f9cc9d;
}
HTML程式碼：
<div class="father"> <div class="son">我是塊級元素</div> <div class="son">我是塊級元素</div> </div>
效果圖：
3、常見的塊級元素
| 標籤 | 標籤名 |
|---|---|
| <div> | 文件分割槽 |
| <p> | 段落 |
| <h1>~<h6> | 一級標題到六級標題 |
| <hr> | 水平線 |
| < pre> | 預格式化文字 |
| <ul > | 無序列表 |
| <ol> | 有序列表 |
| <table> | 表格 |
| < form > | 表單 |
| <fieldset > | 表單元素分組 |
| <output> | 表單輸出 |
| <header> | 頁頭 |
| <footer> | 頁尾 |
| <section > | 分割槽或節 |
| <atrical> | 文章內容 |
| <aside> | 側邊欄 |
| <address > | 聯絡方式資訊 |
| <audio > | 音訊 |
| <video> | 視訊 |
| <blockquote > | 塊引用 |
| <canvas> | 繪製圖形 |
| <dd > | 定義列表中定義條目描述 |
| <dl > | 定義列表 |
| < figure > | 圖文資訊組 |
| <figcaption> | 圖文資訊組標題 |
三、行內元素
1、行內元素的定義
display屬性為inline的元素為行內元素，英文：inline element，其中文叫法有多種，如：內聯元素、內嵌元素、行內元素、直進式元素等。
一個行內元素只佔據它對應標籤的邊框所包含的空間
2、行內元素的特點
- 可與其他行內元素並排
- 不能設定寬高、底邊距，預設的寬度就是文字或圖片的寬度
- 行內元素設定寬、高、margin上下、padding上下無效（豎直無效）
- 行內元素設定line-height，margin左右、padding左右有效（水平有效）
例如：
CSS程式碼：
*{margin:0;
padding:0;
}
.father {
width: 300px;
height: 250px;
background-color: #c3deb7;
}
.son {
background-color: #f9cc9d;
}
HTML程式碼：
<div class="father">
<span class="son">我是行內元素</span>
<span class="son">我是行內元素</span>
</div>
效果圖：
3、常用的行內元素
| 標籤 | 標籤名 |
|---|---|
| <a> | 錨點/超連結 |
| < b> | 字型加粗 |
| <big> | 大號字型 |
| <br> | 換行 |
| <em> | 定義為強調的內容 |
| <i> | 斜體文字效果 |
| <img> | 影象 |
| <input> | 輸入框（注：input標籤屬於行內塊） |
| <label> | 標籤為input元素的標註 |
| <select> | 單選或多選選單 |
| <small> | 小號字型 |
| <span> | 組合文件的行內元素 |
| <strong> | 強調內容 |
| <sub> | 定義下標 |
| <sup> | 定義上標 |
| <textarea> | 多行文字輸入框 |
四、塊級元素和行內元素的區別和轉換
區別：
- 一般行內元素只能包含資料和其他行內元素，塊級元素可以包含行內元素和自身及其他塊級元素。
- 預設情況下塊級元素佔用一整行，而行內元素佔據自身寬度空間
- 行內元素不能設定寬高，塊級元素可以
轉換：
可以通過display屬性將塊級元素和行內元素進行相互轉換。
1.display:inline:將標籤div轉換為行內元素，此時div擁有行內元素的特性。例如：
CSS程式碼：
*{margin:0;
padding:0;
}
.father {
width: 250px;
height: 250px;
background-color: #c3deb7;
}
.son {
width: 130px;
height: 50px;
display: inline;//inline將塊級元素轉換為行內元素
background-color: #f9cc9d;
}
p {
color: red;
}
HTML程式碼：
<div class="father">
<div class="son">我原本是塊級元素</div>
<div class="son">我原本是塊級元素</div>
</div>
<p>div轉換為行內元素，寬高設定無效</p>
<p>div可以和其它元素並排</p>
演示圖：
2.display:block:將標籤span轉換為塊級元素，此時div擁有塊級元素的特性。例如：
CSS程式碼：
*{margin:0;
padding:0;
}
.father {
width: 250px;
height: 250px;
background-color: #c3deb7;
}
.son {
width: 130px;
height: 50px;
display: block;//將行內元素轉換為塊級元素
margin-bottom: 20px;
background-color: #f9cc9d;
}
p {
color: red;
}
HTML程式碼：
<div class="father">
<span class="son">我原本是行內元素</span>
<span class="son">我原本是行內元素</span>
</div>
<p>span 轉換為塊級元素，可設定寬高間距</p>
<p>span不能與其它元素並排</p>
演示圖：
3.display：inline-block：將span轉換為行內塊元素，此時span具有塊元素可以設定寬高的特性又具有行內元素不換行的特性,簡單的說，行內塊就是具有可以與其他元素並列的塊級元素。例如：
CSS程式碼：
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 250px;
background-color: #c3deb7;
}
.son {
display: inline-block;//span轉換為行內塊元素，可設定寬高間距，並且保留可與其他元素並排的特性
width: 130px;
height: 50px;
background-color: #f9cc9d;
}
p {
color: red;
}
HTML程式碼：
<div class="father">
<span class="son">我原本是行內元素</span>
<span class="son">我原本是行內元素</span>
</div>
<p>span轉換為行內塊元素，可設定寬高間距</p>
<p>span能與其它元素並排</p>
演示圖：
總之，inline-block融合了inline和block的優勢，使佈局更加的方便且不會造成元素塌陷，但是細心的朋友肯定也發現了，他除了具有inline元素可以與其他元素並列的特點之外也具有它的一些缺陷，比如盒子之間會存在一定的間隙，這是由於我們在寫完結束標籤的時候會進行換行，這時換行符會變成空白符存在於兩個元素之間，也就是我們所看到的間隙，如何消除間隙呢？這個下一章在進行總結吧。
參考文件
https://m.html.cn/qa/css3/13515.html
https://www.cnblogs.com/iceflorence/p/6626187.html?utm_source=itdadao&utm_medium=referral
https://www.cnblogs.com/stfei/p/9084915.html
https://blog.csdn.net/m0_37482190/article/details/88759542
https://www.jianshu.com/p/3723caccfeff
https://blog.csdn.net/weixin_40047834/article/details/80436128
https://www.cnblogs.com/Ry-yuan/p/6848197.html