CSS 布局手册

CSS 布局手册旨在汇集常见的布局样式,这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以用来开始一个项目,而且提供了具体的使用方法,作为开发人员,你可以做出合适的选择。

备注: 如果你是首次接触 CSS 布局,你可以先看一下 CSS 布局学习模块,其中的基础知识有利于你更好的使用本书中的布局样式。

布局专题

专题 描述 布局方法
媒体对象 一个两栏的框,一边是图片,另一边是描述性文字,例如 facebook 上的帖子或推文。 CSS 网格float 回落、fit-content 尺寸
栏目布局 多栏、弹性盒或网格布局的取舍 CSS 网格多栏布局弹性盒布局
元素居中 如何水平或者垂直居中内容。 弹性盒布局盒子对齐
粘性页脚 创建一个页脚,当内容较短时,该页脚位于容器或视图的底部。 CSS 网格弹性盒
分离导航 一种导航模式,其中一些链接在视觉上与其他链接分开。 弹性盒margin
面包屑导航 创建链接列表,允许访问者在页面层次结构中向上导航。 弹性盒
含有计数徽章的列表 一个带有 count 计数的徽章的 items 列表。 弹性盒盒子对齐
分页 链接到内容的某个页面(比如搜索结果)。 弹性盒盒子对齐
卡片 卡片组件,显示在卡片网格中 CSS 网格
网格包装器 用于在一个中央包装器内对齐网格内容,同时也允许项目脱离。 CSS 网格

贡献布局专题

作为 MDN 的一员,我们希望你能贡献一份与上表所示相同格式的布局专题。参见本页以获得编写示例的模板和指南。