# DAY4 - 區塊元素的介紹 - display: block;

### 於 HTML 中最重要的特性之一，區塊元素是什麼?

- 開門見山，首先看到這段code 與畫面:
容器的特性很重要，HTML 要寫得好，基本的元素特性必須搞懂。

    <h1>區塊元素1</h1>
    <h1>區塊元素2</h1>
    <a href="#">行內元素1</a>
    <a href="#">行內元素2</a>

---


- 從此圖，我們可以發現一個問題，那就是:

  h1 會把下一個 h1 推擠下一行。
  a連結卻可以正常並排，原因是為什麼?

- 這也是區塊元素的特性之一，**自動佔滿一整行**。

### 如何分辨是否為區塊元素?

1. 打開瀏覽器，右鍵: 檢查

2. 確認該標籤的屬性欄: **display**

大概可以看得到這個地方: `display: block;` 這就是區塊元素的意思。

3. 也可以透過瀏覽器工具 - **computed** 直接透過**縮放瀏覽器**
來觀察 h1 是否有跟著縮放大小，驗證 h1 區塊元素的特性


---

### 套用 background，更快速辨識區塊、行內元素的特性:

h1,
a {
  margin-bottom: 10px;
  background: green;
  color: white;
}

- 聰明的你，應該更容易辨識誰才是區塊元素了吧 :D


- 當然，還是有很多標籤都含有不同的特性，這些都不需要去死記硬背，透過加入背景顏色效果，並且記住，`display: block`; 就是**區塊元素**。

- 而**區塊元素**，最大的特性，就是根據瀏覽器當下的大小，直接**佔據一整行**。

下一個元素會被自動推到下一行，無論你怎麼更改元素的寬度亦是。

---

- [延伸學習-各種區塊元素有哪些?](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements)

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章`