Hi i,m JinXiang

---

? 前言 ?

本篇文章主要介紹HTML中行內元素和塊級元素的區別? 分別有哪些??以及部分理論知識

🍉歡迎點贊 👍 收藏 ?留言評論 📝私信必回喲😁

🍉博主收將持續更新學習記錄獲，友友們有任何問題可以在評論區留言

---

目錄

?什么是塊級元素：

?什么是行內元素：

?塊級元素和行內元素的區別：

1、顯示方式：

2、占據空間：

3、允許包含的內容：

---

?什么是塊級元素：

塊級元素是指在文檔流中以塊的形式展現的元素，它們會在前后生成新的行并且自動換行。塊級元素通常用來組織頁面結構，比如<div>、<h1>、<p>等。

塊級元素的特點：

1. 塊級元素會自動換行，并占據一整行的寬度；
2. 可以設置寬度、高度、內邊距和外邊距；
3. 可以嵌套其他塊級元素和行內元素；
4. 可以設置 CSS 樣式，比如背景顏色、字體樣式等。

由于塊級元素的特點，它們通常被用來組織頁面的結構，并且對于頁面布局和設計起著重要的作用。

?什么是行內元素：

行內元素是指在文檔流中流動的元素，通常用來包含文本或其他行內元素，比如<a>、<span>、<i>、<em>、<strong>、<img>、<input>等。

行內元素通常具有以下特點：

1. 默認寬度由內容撐開；
2. 不能設置寬度和高度，但可以設置內邊距和外邊距；
3. 不能嵌套塊級元素，但可以嵌套其他行內元素；
4. 可以設置 CSS 樣式，比如文字顏色、字體大小等。

由于行內元素的特點，它們通常被用來裝飾文本、設置文字樣式或者鏈接到其他頁面。

?塊級元素和行內元素的區別：

1、顯示方式：

• 塊級元素通常在頁面上以獨立的塊展現，如`<h1>`、`<p>`、`<div>`等；
• 而行內元素通常與其他內容一起排列，如`<a>`、`<span>`、`<img>`等。

2、占據空間：

• 塊級元素通常會撐滿整個父容器的寬度，并且會在它們的前后都生成一些空白區域，
• 而行內元素只會占據它們所在的標簽所在的那一行的空間，不會獨占一行并生成多余的空白區域。

3、允許包含的內容：

• 1. 塊級元素可以包含其他塊級元素和行內元素，
• 2. 而行內元素只能包含其他行內元素和文本。

常見的塊級元素包括：`<div>`、`<h1>`~`<h6>`、`<p>`、`<ul>`、`<ol>`、`<li>`、`<table>`、`<form>`等。

常見的行內元素包括：`<a>`、`<span>`、`<img>`、`<b>`、`<i>`、`<em>`、`<strong>`、`<code>`、`<input>`等。

總結不易，希望uu們不要吝嗇親愛的👍喲(＾Ｕ＾)ノ~ＹＯ！！如有問題，歡迎評論區批評指正😁