塊元素和行內元素區別詳述

塊元素和行內元素區別詳述

一、塊元素和行內元素的基本概念

在HTML中，元素根據顯示效果除了分為塊元素和行內元素之外，還有一種元素是行內塊元素。這三種元素的特點如下：

• 塊元素：在頁面上以塊的形式顯示，獨佔一行，可以設置寬度和高度，可以設置內外邊距和邊框。
• 行內元素：在頁面上不會以塊的形式顯示，可以在一行中與其他元素並排顯示，不能設置寬度和高度，不能設置上下的內外邊距，水平方向的內外邊距和邊框可以設置；
• 行內塊元素：在頁面上以塊的形式顯示，可以在一行中與其他元素並列，可以設置寬度和高度，可以設置內外邊距和邊框。

二、塊元素和行內元素在文檔流中的表現

塊元素會獨佔一行，所以在頁面上，塊元素之間都是分開的，它們之間有空白，而行內元素卻是緊密排列。塊元素會在行內元素前後產生換行。塊元素的大小在文檔流中佔據一定的空間，並且可以設置寬度和高度，可以設置內外邊距和邊框，而行內元素只有大小與間距這兩個屬性。

<div>這是一個塊級元素</div>
<span>這是一個行內元素</span>

三、塊元素和行內元素在受CSS控制時的表現

1.塊級元素受CSS控制

塊級元素默認寬度為父元素的寬度，高度為內容的高度。當給塊級元素設置CSS時，CSS可以控制塊級元素的寬度和高度，還可以控制塊級元素的顯示方式（比如display:inline）。塊級元素也可以設置內外邊距和邊框。

<div style="background-color: #f00; width: 200px; height: 100px; margin: 10px; padding: 5px; border: 1px solid #000;">這是一個塊級元素</div>

2.行內元素受CSS控制

行內元素不能設置寬度、高度和內外邊距等CSS樣式，而通過設置display:block，可使行內元素展現為塊級元素，使其可以設置寬度、高度和邊距等屬性，但是還是不能設置內邊距。

<span style="background-color: #f00; display:block; width: 50px; height: 20px; margin: 10px; padding: 5px; border: 1px solid #000;">這是一個行內元素</span>

3.行內塊元素受CSS控制

行內塊元素可以通過CSS設置寬度、高度、內外邊距和邊框等樣式，可以利用行內塊元素的特點，讓多個塊級元素並排顯示。

<span style="background-color: #f00; display:inline-block; width: 50px; height: 20px; margin: 10px; padding: 5px; border: 1px solid #000;">這是一個行內塊級元素</span>

四、塊級元素和行內元素的具體應用場景

1.塊級元素的應用場景

塊級元素一般用來包裹大型結構化內容，比如列表、段落、標題、圖像、額外區域等。比如div、ul、ol、h1~h6等。

2.行內元素的應用場景

行內元素一般用來包裹小型非結構化內容，比如單詞、短語、強調的文本等。比如a、span、img、input、label等。

3.行內塊元素的應用場景

行內塊元素可以應用在一些元素內部，使它們可以同時設置寬度，高度和內外邊距等樣式。比如button、textarea、select等，也適用於圖像、列表、卡片等樣式的設計。

五、塊級元素和行內元素的協作應用

將行內元素放在塊級元素中使用，比如a標籤可以在div中實現換行，a標籤還可以作為圖片的鏈接，鏈接的一些樣式在塊狀元素div上的設置。

<div style="width: 200px; height: 100px; background-color: #f00;">
  <a href="#" style="text-decoration: none;">這是一個鏈接</a>
</div>

六、小結

塊元素和行內元素的區別主要表現在它們在文檔中的排布和在樣式表中的表現。塊級元素有自身的獨立的一塊空間，所以可以設置寬高，而行內元素只能設置水平方向上的寬高。當然，元素也可以通過設置CSS樣式改變原本的塊級元素或行內元素的特性，使用時需要根據具體的情況去選取。