CSS 指南
您可以使用多种方法来布局您的网页和应用程序。MDN 包含了各种方法的深度指南，此页面概述了所有这些方法。
常规流、块级和行内布局
如果您不使用弹性盒或网格布局，那么您的内容将使用常规流，或块级和行内布局进行布局。这些指南将帮助您理解这种布局方法的工作方式。
- 正常流中的块级和行内布局
-
常规流简介。
- 流内和流外
-
如何将元素移出常规流，以及这对文档布局的影响。
- 格式化上下文解释
-
创建新格式化上下文的介绍。
- 流式布局和书写模式
-
如果您使用不同的书写模式（例如垂直文本），流式布局的工作方式。
- 流式布局和溢出
-
理解和管理溢出。
- 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 中的盒模型对齐
-
对齐属性首次出现在弹性盒中；本指南解释了它们的工作原理。
- 网格布局中的盒模型对齐
-
如何在网格布局中对齐项目。
- 多列布局中的盒模型对齐
-
对齐在多列布局中将如何工作。