CSS 布局 - CSS：层叠样式表 | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
View in English Always switch to English
你可以使用多种方法来布局网页和应用程序。对于这些不同的方法，MDN 囊括了许多深入的指南，本页面提供了它们的概览。
如果你不使用 flex 或者 grid 布局，那么你的内容则会采用常规流布局，或者块级、内联布局。这些指南可以帮助你理解这种布局方式的工作原理。
怎样使一个元素脱离常规流，以及这对于页面的布局有何影响。
流式布局怎样在不同的书写模式工作，例如竖排文本。
理解盒模型是 CSS 的基础之一，这篇指南介绍了它的工作原理。
找出为何有时你的边距会比预期的短，因为常规流中的边距会折叠。
绝对定位、弹性盒与网格布局都会使得堆叠（元素在 z 轴上的相对位置）可由 z-index 属性进行操作。这篇文章介绍了怎样掌握它。
多列布局（通常被称为 multicol），会从常规流中取出内容，并把他们拆分成列。通过下面的指南了解怎样使用这种布局方式。
可对列设置的样式属性非常有限，这篇指南解释了你可以做些什么。
CSS 弹性盒布局（通常被称为 flexbox），是一种为用户界面设计和单一维度上元素排布而优化的布局模型。在弹性盒布局模型中，一个弹性容器的子元素可以被沿任意方向排布，并且“弹性”调整它们的大小，要么扩展来填充未使用的空间，要么收缩以避免溢出父元素。
弹性盒与其他布局方法、其他 CSS 规范的联系。
解释了更改元素顺序和方向的不同方法，并涵盖了这样做的潜在问题。
解释了 flex-grow、flex-shrink 和 flex-basis 属性。
怎样创建包含多行元素的弹性容器并控制元素在这些行上的展示方式。
网格布局为 CSS 引入了一个二维网格系统。网格可以被用来布局重要的页面区域或小型的用户界面元素。
网格布局和例如对齐、大小、弹性盒等其他方法的联系。
怎样使用 grid-template 语法放置元素。
怎样命名网格线，并使用线名来放置元素，而不是用编号。
怎样掌握自动定位算法，并理解浏览器是怎样放置元素的。
怎样在网格中沿两条轴对齐元素并分配空间。
怎样在网格布局中使用相对于流的属性和值而不是物理值。
解释怎样使用子网格值，属于网格布局第二版的一部分。
对于块和内联布局中对齐属性的规范，虽然目前还没有浏览器支持。
对齐属性首次出现于弹性盒布局，这篇指南解释了它如何工作。
此页面最后更新于 2026年8月12日，由 MDN 贡献者更新。
本内容的部分版权归 mozilla.org 贡献者所有，©1998–2026。内容依据知识共享许可协议提供。