CSS 指南

常規流、塊級和行內佈局

如果您不使用彈性盒或網格佈局，那麼您的內容將使用常規流，或塊級和行內佈局進行佈局。這些指南將幫助您理解這種佈局方法的工作方式。

正常流中的塊級和行內佈局

常規流簡介。

流內和流外

如何將元素移出常規流，以及這對文件佈局的影響。

格式化上下文解釋

建立新格式化上下文的介紹。

流式佈局和書寫模式

如果您使用不同的書寫模式（例如垂直文字），流式佈局的工作方式。

流式佈局和溢位

理解和管理溢位。

CSS 盒模型簡介

理解盒模型是 CSS 的基礎；本指南解釋了它的工作原理。

掌握外邊距摺疊

瞭解為什麼在常規流中，由於外邊距摺疊，您有時會得到比預期小的外邊距。

理解 CSS z-index

絕對定位、彈性盒和網格都可以透過 z-index 屬性來操作堆疊（元素在 z 軸上的相對位置）。本文解釋瞭如何管理它。

多列布局

多列布局，通常稱為 multicol，它將常規流中的內容分成多列。在以下指南中瞭解如何使用這種佈局方法。

多列布局的基本概念

多列布局基本功能的概述。

為列新增樣式

列的樣式設定機會有限；本指南解釋了您可以做什麼。

跨列和平衡

元素跨列顯示，以及列內容的平衡。

多列布局中的溢位處理

當內容多於可用列空間時會發生什麼？

多列布局中的內容斷裂

處理內容分割成列時的內容斷裂。

Flexbox

CSS 彈性盒佈局，通常稱為 flexbox，是一種針對使用者介面設計和一維專案佈局最佳化的佈局模型。在彈性佈局模型中，彈性容器的子元素可以按任何方向佈局，並且可以“彈性”地調整其大小，即可以增長以填充未使用的空間，也可以縮小以避免溢位父容器。

彈性盒的基本概念

彈性盒功能的概述。

彈性盒與其他佈局方法的關係

彈性盒與其他佈局方法和其他 CSS 規範的關係。

在彈性容器中對齊專案

盒對齊屬性如何與彈性盒配合使用。

排序彈性項

解釋改變專案順序和方向的不同方法，並涵蓋這樣做的潛在問題。

控制彈性專案沿主軸的比例

解釋 flex-grow、flex-shrink 和 flex-basis 屬性。

掌握彈性專案的換行

如何建立多行彈性容器並控制這些行中專案的顯示。

彈性盒的典型用例

典型的彈性盒用例的常見設計模式。

網格佈局

CSS 網格佈局為 CSS 引入了一個二維網格系統。網格可用於佈局主要頁面區域或小的使用者介面元素。

網格佈局的基本概念

網格佈局功能的概述。

網格佈局與其他佈局方法的關係

網格與其他方法（如對齊、大小調整和彈性盒）的關係。

使用基於線的放置進行佈局

如何按編號線放置專案。

網格模板區域

如何使用 grid-template 語法放置專案。

使用命名網格線進行佈局

如何命名線，並按線名而不是數字放置專案。

CSS 網格佈局中的自動放置

如何管理自動放置演算法，並理解瀏覽器如何放置專案。

CSS 網格佈局中的盒對齊

如何在網格中對齊專案，並在兩個軸上分配空間。

CSS 網格、邏輯值和書寫模式

如何在網格中使用流相對屬性和值，而不是物理屬性和值。

CSS 網格佈局和可訪問性

使用網格佈局時的一些可訪問性注意事項。

使用 CSS 網格實現常見佈局

使用網格構建一些常見佈局。

子網格

子網格值（網格級別 2 的一部分）的解釋。

瀑布流佈局

網格級別 3 中瀑布流佈局功能的解釋。

對齊

塊佈局中的盒模型對齊

對齊屬性是為塊級和行內佈局指定的，儘管目前還沒有瀏覽器支援。

Flexbox 中的盒模型對齊

對齊屬性首次出現在彈性盒中；本指南解釋了它們的工作原理。

網格佈局中的盒模型對齊

如何在網格佈局中對齊專案。

多列布局中的盒模型對齊

對齊在多列布局中將如何工作。