# 容器的特性 - 區塊元素:

### 常見的區塊元素:

- 區塊元素的特性有哪些? 這邊可以搭配 css background 來方便檢視:

[完整的區塊元素 + 行內元素筆記與特性我參閱: code。YuKun 這邊的筆記!](https://yanennnnn.github.io/html/20200827/fd7f7d68/)

1. 會自動佔據一整行
2. 使物件於下一行產生
3. 這邊**要注意**的是，區塊元素在不設定寬 width 是會自動適應父元素，也就是 body 也就是為什麼 區塊元素會自動適應滿版的原因

4. 可透過 box-model 看到 css style 的 `display: block;`

此設定就是預設滿版，但開發者有設定寬度的話，也是可將其改變的!

    <h1>區塊元素</h1>
    <h1 class="h1sub">會佔據一整行</h1>

// css:

h1 {
    background: blue;
}

.h1sub {
    background: green;
}

- 可以發現兩段 h1 確實都吃到滿版，也會使下一個標籤或是類別另外起一行:


---

- p 段落基本上也是一樣的:

    <p>
        <!-- lorem p 單字*10 -->
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, doloremque?
    </p>

// css:

p {
    background: red;
}

---

### 什麼是，行內元素？

- 行內元素的特性跟區塊元素 - `display: block;` 就不太一樣了喔

- 我放了三個a標籤，分別詳細的輸入了行內元素的特性

行內元素的大小完全是根據標籤內的內容而決定的，並不會有佔滿整行與換行的問題。


    <a href="#">
        我是行內元素
    </a>
    <a href="#">
        不會另外起一行
    </a>
    <a href="#">
        有自己的寬高
    </a>

// css:

a {
    height: 20px;
    background: pink;
}

###### tags: `HTML、CSS`