---
# System prepended metadata

title: '容器的特性 - 區塊元素:'
tags: [HTML、CSS]

---

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

### 常見的區塊元素:

- 區塊元素的特性有哪些? 這邊可以搭配 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 確實都吃到滿版，也會使下一個標籤或是類別另外起一行:

![](https://i.imgur.com/B1nhVWU.png)


---

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

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

```
// css:

p {
    background: red;
}
```
---

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

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

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

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

![](https://i.imgur.com/DpPuTQy.png)


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

```
// css:

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

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