#17 CSS block、inline、inline-block：網頁排版的御三家

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。

---

在 CSS 中，display 屬性是一個關鍵的屬性，它可以改變 HTML 元素在網頁中的顯示方式。本篇我們將學習三種常見的 display 屬性值：block、inline 和 inline-block，並了解它們的特性和使用情境。

↓ 今日學習重點 ↓

• 了解網頁上三種常見的 display 屬性：block、inline、inline-block

---

1. block

Block 區塊級元素通常會單獨占據一行，佔據父層的整個寬度。我們在講解 HTML 時曾經有提過好幾種預設為 block 的 HTML 元素，如：div、h1 等等。

.example-block {
    display: block;
}

一、Float 排版：讓 Block 能夠浮起來

block 如果加上 float 屬性可以浮起來，可以往左飄也可以往右飄，這在過去是最主流的排版方式之一，只不過 flex 出現後就減少了。

不過…