按主题找术语 · 51 份指南

布局与 CSS

认识内容在不同屏幕上如何决定大小、位置、间距、层次和形状。

01 / 术语图鉴

全部布局与 CSS术语

打开一个术语，就能看简单解释、示例、使用时机、正式程度和代码名称。

01 · 深入了解
包含块 Containing Block

包含块是元素用来计算位置与百分比尺寸的参考矩形。
02 · 深入了解
背景模糊 Backdrop Blur

背景模糊会柔化半透明表面后方的内容，不会模糊表面本身的文字或控件。
03 · 深入了解
便当网格 Bento Grid

便当网格把不同尺寸的方块排进同一个布局，较大的跨列区块可以显示哪些内容更重要。
04 · 核心
不透明度 Opacity

不透明度表示元素和子元素有多不透明。它可从完全透明变为完全不透明。
05 · 深入了解
层叠分层 Cascade Layers

层叠分层是用名称分组 CSS 规则，并先决定各组的优先顺序。浏览器会先比较分层，再比较选择器优先级。
06 · 深入了解
层叠上下文与 Z 轴顺序（教学组合） Stacking Context & Z-index — Learning Bundle

这组教学连接两个 CSS 概念。Stacking Context 会单独管理自己的绘制顺序；z-index 则为该上下文中符合条件的盒子排序。这个组合本身不是单个标准 CSS 术语。
07 · 核心
单页式布局 Single-Page Layout

单页式布局把一个主要故事或任务放在同一个长页面。
08 · 核心
弹性盒布局 Flexbox

Flexbox 是一次处理一个方向的 CSS 布局系统，可以沿横行或竖列排列并分配项目。
09 · 核心
断点与媒体查询 Breakpoint & Media Query

断点是布局需要改变的位置；媒体查询会在视口或设备符合指定条件时应用 CSS。
10 · 深入了解
堆叠上下文 Stacking Context

堆叠上下文是 CSS 图层的局部分组。元素会先在自己的组内排序，再把整组和其他组比较前后位置。
11 · 深入了解
滚动吸附 Scroll Snap

CSS 滚动吸附能让滚动区域在用户滚动后，停在预先设置的对齐位置。
12 · 核心
盒模型 Box Model

CSS 盒模型用来说明元素的尺寸。每个盒子都包含内容、内边距、边框和外边距。
13 · 核心
居中单栏布局 Centered Column

居中单栏布局是一列设有最大宽度的阅读区，左右两侧看起来留有相等空间。
14 · 核心
卡片网格 Card Grid

卡片网格会重复排列可以互相比较的卡片，并按可用空间调整列数。
15 · 深入了解
块级格式化上下文 Block Formatting Context

块级格式化上下文（BFC）是一个独立处理块级布局的范围。它能把浮动元素包在里面，也能阻止部分外边距和浮动元素影响外部内容。
16 · 核心
宽高比 Aspect Ratio

宽高比用来表示元素的宽度和高度如何相比。
17 · 核心
留白与间距 Spacing

留白与间距是有意留下的空间。它能把相关项目放在一起、分开不同概念，也让页面有节奏。
18 · 核心
媒体填充方式 object-fit

`object-fit` 会控制图片、视频或类似媒体如何放进自己的盒子。
19 · 核心
内边距 Padding

内边距是元素边框内的空间，位于内容和边缘之间。
20 · 深入了解
内容内在尺寸 Intrinsic Sizing

内容内在尺寸是让元素里的内容一起决定大小，而不是只使用外部指定的固定尺寸。
21 · 深入了解
瀑布流布局 Masonry Layout

瀑布流布局会把不同高度的项目排进各列，填满纵向空隙，但不共用行线。
22 · 深入了解
容器查询 Container Query

容器查询让 CSS 根据组件所在容器来调整内容。它看的是容器尺寸或样式，而不只看整个视口。
23 · 核心
视口单位 Viewport Units

视口单位是按浏览器可见区域计算的 CSS 长度。小型、大型和动态版本能处理会显示或隐藏的浏览器工具栏。
24 · 核心
外边距 Margin

外边距是元素边框外的空间，用来拉开它与周围布局项目的距离。
25 · 核心
伪类 Pseudo-class

伪类是 CSS 选择器的一部分，会按元素的状态、位置、语言或用户操作等条件来选取元素。
26 · 核心
伪元素 Pseudo-element

伪元素能让 CSS 选取原始 HTML 中没有的一小部分或盒子，例如第一个字或生成的装饰。
27 · 核心
文本截断 Text Truncation

文本截断会裁掉部分文字来节省空间，并用省略号表示单行或多行内容还没有显示完整。
28 · 深入了解
文档型布局 Documentation Layout

文档布局把导航、文章、示例、大纲和下一篇链接放在同一阅读页面。
29 · 核心
项目间距 Gap

gap 是容器放在 Flexbox 或 Grid 子项目之间的空间，同一套规则会用于每一组相邻项目。
30 · 核心
溢出 Overflow

溢出是内容超出盒子时的情况。CSS 可以让内容显示、裁剪，或提供滚动。
31 · 核心
应用固定外壳 App Shell

应用固定外壳是在内容换页时仍保留的小框架。它常放主导航、账户和状态。
32 · 深入了解
越界滚动行为 overscroll-behavior

`overscroll-behavior` 会控制滚动区域到达边界后的行为。它可以阻止滚动接着影响外层区域，也能改变边界反馈。
33 · 深入了解
粘性与固定定位（教学组合） Sticky & Fixed Position — Learning Bundle

这组教学比较两个 CSS position 值。sticky 会先留在正常流中，滚动到容器内的指定位置后才停住；fixed 则以固定定位的 containing block 为基准。这个组合本身不是单个 CSS 术语。
34 · 深入了解
子网格 Subgrid

子网格是放在另一个网格里的网格，会沿用父网格的行或列尺寸。它可以只沿用一个方向，也可以两个方向都沿用。
35 · 深入了解
最大内容尺寸 max-content

`max-content` 是内容在普通换行点都不换行时，想要占用的尺寸。
36 · 深入了解
最小内容尺寸 min-content

`min-content` 是内容在所有可换行处都换行后，能缩到的最小尺寸。
37 · 核心
clamp() 范围函数 clamp()

`clamp()` 会采用首选的 CSS 数值，但不会小于最小值，也不会大于最大值。
38 · 核心
CSS 层叠 CSS Cascade

CSS 层叠是浏览器用来决定同一元素该应用哪个样式的一组规则。它会依次比较样式来源、重要性、封装上下文和层。也会比较选择器优先级、作用域和先后顺序。
39 · 核心
CSS 定位 CSS Positioning

CSS 定位用来决定元素以哪里为基准。元素可以留在正常流中，也可以用自身、上级元素或视口作为参照。
40 · 核心
CSS 继承 CSS Inheritance

CSS 继承是指子元素没有自己的值时，某些属性会沿用父元素的计算值。
41 · 核心
CSS 逻辑属性 CSS Logical Properties

CSS 逻辑属性会按文字流向描述方向，例如块方向和行内方向，而不只使用上、右、下、左。这能让布局跟着语言的书写方向调整。
42 · 深入了解
CSS 锚点定位 CSS Anchor Positioning

CSS 锚点定位能让一个盒子根据另一个已命名的锚点元素来决定位置。
43 · 深入了解
CSS 嵌套规则 CSS Nesting

CSS 嵌套规则是把一条样式规则写在另一条里面的原生语法。浏览器仍会按 CSS 规范解析选择器和它们的优先级。
44 · 核心
CSS 网格 CSS Grid

CSS Grid 是同时安排行和列的布局系统，可以定义固定区域，也能随空间调整。
45 · 核心
CSS 选择器 CSS Selector

CSS 选择器是一种用来找出页面元素的匹配规则，找到后就能应用样式。
46 · 核心
CSS 选择器优先级 CSS Specificity

CSS 选择器优先级是每个选择器的比较分数。其他层叠条件相同时，浏览器会用这个分数决定哪个样式优先。
47 · 深入了解
CSS 自定义属性 CSS Custom Property

CSS 自定义属性是可以重复使用的 CSS 值，也常称为 CSS 变量。它会遵循层叠规则，并能按作用域或主题改变。
48 · 核心
CSS Fixed 定位 Fixed Position

CSS Fixed 定位会让元素相对固定容器摆放，这个容器通常是浏览器窗口。滚动文档时，元素通常会留在原位。
49 · 核心
CSS Sticky 定位 Sticky Position

CSS Sticky 定位一开始会像普通相对定位。滚动时，元素可以停在指定边缘，但不会超出所属容器。
50 · 核心
CSS z-index z-index

z-index 是设置定位元素前后图层的 CSS 属性。在某些条件下，它也会建立新的局部堆叠上下文。
51 · 核心
minmax() 网格函数 minmax()

`minmax()` 是 CSS Grid 函数，可同时设置行或列的最小与最大尺寸。