CSS 布局：技术文档整理

你可以使用多种方法来布局网页和应用程序。对于这些不同的方法，MDN 囊括了许多深入的指南，本页面提供了它们的概览。

你可以使用多种方法来布局网页和应用程序。对于这些不同的方法，MDN 囊括了许多深入的指南，本页面提供了它们的概览。

常规流、块级和内联布局

如果你不使用 flex 或者 grid 布局，那么你的内容则会采用常规流布局，或者块级、内联布局。这些指南可以帮助你理解这种布局方式的工作原理。

• 常规流中的块和内联布局
  • : 对常规流的介绍。
• 应用或脱离流式布局
  • : 怎样使一个元素脱离常规流，以及这对于页面的布局有何影响。
• 格式化上下文简介
  • : 介绍怎样创建一个新的格式化上下文。
• 流布局和书写模式
  • : 流式布局怎样在不同的书写模式工作，例如竖排文本。
• 流布局和溢出
  • : 理解并管理溢出。
• CSS 盒模型介绍
  • : 理解盒模型是 CSS 的基础之一，这篇指南介绍了它的工作原理。
• 掌握外边距折叠
  • : 找出为何有时你的边距会比预期的短，因为常规流中的边距会折叠。
• 理解 CSS 的 z-index 属性
  • : 绝对定位、弹性盒与网格布局都会使得堆叠（元素在 z 轴上的相对位置）可由 z-index 属性进行操作。这篇文章介绍了怎样掌握它。

多列布局

多列布局（通常被称为 multicol），会从常规流中取出内容，并把他们拆分成列。通过下面的指南了解怎样使用这种布局方式。

• 多列布局的基础概念
  • : 对多列布局基本功能的概览。
• 多列布局的样式
  • : 可对列设置的样式属性非常有限，这篇指南解释了你可以做些什么。
• 跨越与平衡多列布局
  • : 在多列间跨越元素，并且平衡列中的内容。
• 处理多列布局中的溢出
  • : 如果列中的内容比剩余空间多将会如何？
• 多列布局中的内容分割
  • : 处理当内容被分为多列时的分割。

弹性盒

CSS 弹性盒布局（通常被称为 flexbox），是一种为用户界面设计和单一维度上元素排布而优化的布局模型。在弹性盒布局模型中，一个弹性容器的子元素可以被沿任意方向排布，并且“弹性”调整它们的大小，要么扩展来填充未使用的空间，要么收缩以避免溢出父元素。

• 弹性盒布局基础
  • : 弹性盒特性的概览。
• 弹性盒与其他布局方法的联系
  • : 弹性盒与其他布局方法、其他 CSS 规范的联系。
• 弹性盒容器中的盒对齐方式
  • : 弹性盒中的盒对齐属性如何工作。
• 弹性元素的排序方式
  • : 解释了更改元素顺序和方向的不同方法，并涵盖了这样做的潜在问题。
• 控制弹性元素在主轴上的比例
  • : 解释了 flex-grow、flex-shrink 和 flex-basis 属性。
• 掌握弹性元素的包装
  • : 怎样创建包含多行元素的弹性容器并控制元素在这些行上的展示方式。
• 弹性盒的典型用例
  • : 典型弹性盒布局用例的常见设计模式。

网格布局

网格布局为 CSS 引入了一个二维网格系统。网格可以被用来布局重要的页面区域或小型的用户界面元素。

• 网格布局的基本概念
  • : 网格布局特性的概览。
• 网格布局和其他布局方法的联系
  • : 网格布局和例如对齐、大小、弹性盒等其他方法的联系。
• 基于网格线的定位
  • : 怎样按照编号线放置元素。
• 网格模板区域
  • : 怎样使用 grid-template 语法放置元素。
• 使用命名线布局
  • : 怎样命名网格线，并使用线名来放置元素，而不是用编号。
• CSS 网格布局中的自动定位
  • : 怎样掌握自动定位算法，并理解浏览器是怎样放置元素的。
• CSS 网格布局中的盒模型对齐
  • : 怎样在网格中沿两条轴对齐元素并分配空间。
• CSS 网格、逻辑值和书写模式
  • : 怎样在网格布局中使用相对于流的属性和值而不是物理值。
• CSS 网格布局和无障碍
  • : 当使用网格布局时的一些无障碍考虑。
• 利用 CSS 网格布局实现常用布局
  • : 使用网格来搭建一些常见布局。
• 子网格
  • : 解释怎样使用子网格值，属于网格布局第二版的一部分。

对齐

• 块布局中的盒对齐方式
  • : 对于块和内联布局中对齐属性的规范，虽然目前还没有浏览器支持。
• 弹性盒布局中的盒对齐方式
  • : 对齐属性首次出现于弹性盒布局，这篇指南解释了它如何工作。
• 网格布局中的盒对齐方式
  • : 怎样在网格布局中对齐元素。
• 多列布局中的盒对齐方式
  • : 多列布局中的对齐如何工作。