常见 CSS 简写属性

CSS 简写属性可以一次性设置多个完整属性，而任何未指定的完整属性都会被重置为简写属性的默认值——这会悄无声息地覆盖层叠中更早设置的值。

如果你曾经设置了 background-size: cover，却发现它在后续某行 background: 出现后就消失了，那你已经吃过这个苦头了。整个过程不会报任何错误，这正是它如此耗时难以排查的原因。这种行为本身，而非语法问题，才是大多数简写属性 bug 的根源。本文将介绍你日常使用频率最高的六个简写属性（margin、padding、border、font、background 和 flex），包括各自的值顺序、必填值，以及那些会导致静默失败的重置陷阱。

为什么 CSS 简写属性会重置其他属性？

每个 CSS 简写属性都会展开为一组固定的完整属性，未指定的值会被设置为简写属性定义的默认值，并覆盖之前对该完整属性的任何设置。写下 background: red 不仅仅是设置颜色，它还会将 background-image、background-position、background-size 以及所有其他背景完整属性重置为初始值。

这就是为什么最常见的简写属性 bug 从来不是语法错误，而是后面的简写属性悄悄重置了在其他地方正确设置的完整属性：

/* Bug：简写属性将 background-size 重置为 auto */
.hero {
  background-size: cover;
  background: url('hero.jpg') no-repeat center;
}

/* Fix：将 size 保留在简写属性内部 */
.hero {
  background: url('hero.jpg') no-repeat center / cover;
}

这种失效模式在声明本身中是不可见的，通常只有在渲染页面时才会暴露出来。回放生产环境会话可以重建真实的计算样式，从而发现被折叠的 background-size——而使用不同资源的本地检查往往会遗漏这一问题。

margin 和 padding：顺时针规则

margin 和 padding 接受一到四个值，按顺时针方向从顶部开始：上、右、下、左（TRBL，即单词”trouble”中的辅音字母）。值的数量决定了哪些边会相互镜像：

.button  { padding: 12px 24px; }   /* 垂直方向 12px，水平方向 24px */
.section { margin: 40px auto; }     /* 垂直方向 40px，水平方向 auto */

margin: 0 auto 通过将剩余内联空间平均分配到两侧，使块级元素水平居中。它对内联元素无效，flex 或 grid 子项则应通过各自的对齐属性来实现居中。

border：style 是必填项

在 border 简写属性中，宽度、样式和颜色的值顺序无关紧要，因为它们的类型各不相同：2px solid red 和 solid red 2px 是等价的。但 border-style 是必填项：其初始值为 none，因此若未指定样式，无论宽度或颜色如何设置，边框都不会渲染。

.card { border: 1px solid #e0e0e0; }  /* 正常渲染 */
.card { border: 1px #e0e0e0; }        /* 缺少 style → 不渲染任何内容 */

宽度和颜色是可选的，会回退到各自的默认值（medium 和 currentcolor）。养成将 style 写在最前面的习惯，就能彻底避免这类 bug。

font：size 和 family 是必填项

font 简写属性组合了 font-style、font-variant、font-weight、font-size、line-height 和 font-family，其中 font-size 和 font-family 都是必填项。缺少任意一个，整条声明都会被忽略。顺序是严格的：style、variant 和 weight 必须出现在 font-size 之前，line-height 只能紧跟在 font-size 之后，并以斜杠连接。

/* 完整格式：style variant weight size/line-height family */
.text { font: italic small-caps bold 16px/1.5 'Segoe UI', sans-serif; }

/* 最简有效声明 */
.text { font: 16px Arial, sans-serif; }

/* 无效 — family 在 size 之前，声明被静默丢弃 */
.text { font: Arial 16px; }

由于 font 会将所有省略的组件重置为初始值，如果在其他地方设置了 font-weight 之后再应用 font 简写，该 weight 会被重置回 normal。

background：position/size 斜杠语法

background 是最容易出错的简写属性。最容易让开发者踩坑的规则是：background-size 只能紧跟在 background-position 之后，并以斜杠分隔（center / cover）。因此，斜杠前没有 position 的 size 是无效的，会被丢弃。这纠正了一些旧教程中将 background-size 单独声明的做法；它应该写在简写属性内部。

标准值顺序为：image、position / size、repeat、attachment、origin、clip、color。

/* 正确：position / size */
.panel { background: #000 url('bg.jpg') center / cover no-repeat fixed; }

/* 错误：斜杠前没有 position → 无效 */
.panel { background: url('bg.jpg') / cover; }

/* 错误：没有斜杠，'cover' 被解析为第二个 position 值 */
.panel { background: url('bg.jpg') center cover; }

在单层语法中，color 可以放在任意位置，但将其放在最后与 MDN 的顺序一致，可读性更好。

flex：flex: 1 并不等于 1 1 auto

浏览器将 flex: 1 计算为 flex: 1 1 0%，而非 1 1 auto，因此该元素在分配空间时会忽略自身的宽度和内容尺寸。当只给定一个数字时，浏览器使用 0% 作为 flex-basis，尽管规范文本中写的是 0。你可以在 DevTools 中打开 Computed 面板，查看 flex-basis 来确认这一点。

.grow  { flex: 1; }          /* 1 1 0%  — 增长，忽略内容尺寸 */
.auto  { flex: auto; }       /* 1 1 auto — 从内容尺寸开始增长 */
.fixed { flex: 0 0 200px; }  /* 固定 200px 轨道，不增长/收缩 */
.none  { flex: none; }       /* 0 0 auto — 按内容尺寸，不可伸缩 */

当你希望元素根据内容尺寸来分配空间时，使用 flex: auto；需要固定轨道时，使用 flex: 0 0 <size>。

CSS 简写属性最常见的错误有哪些？

以下四种失效模式涵盖了大多数简写属性 bug，每一种都是上述规则的直接体现：

1. 后面的简写属性重置了完整属性。 主题覆盖中的 background: 清除了之前设置的 background-size: cover。解决方法是将值保留在简写属性内部，或在简写属性之后再设置完整属性。
2. 缺少 font-family 或 font-size。 整条 font 声明被丢弃，不会有任何部分生效。
3. 缺少 border-style。 没有 style 意味着默认值 none，边框不会渲染。
4. background-size 前没有 position 和斜杠。 应写成 center / cover，而不是单独的 cover。

list-style、outline 和 place-items 等不常用的简写属性遵循相同的重置规则，但出现频率要低得多；等熟练掌握这六个常用简写属性后，再以同样的方式使用它们即可。

能够预防几乎所有这类问题的一个习惯：将每个简写属性视为对该属性组的完整重置，而非叠加式调整。当你在其他地方设置的样式消失时，打开 Computed 面板，检查是否有后续的简写属性将其覆盖。这几乎总是问题所在。

常见问题

什么时候应该使用 CSS 简写属性，什么时候应该使用完整属性？

当你想一次性设置某个属性组的大部分或全部属性，并且可以接受将省略的值重置为默认值时，使用简写属性。当你只需要修改某一个属性而不影响其他属性时，使用完整属性，例如只调整 background-size 而保留现有的 background-image。简写属性始终会重置省略的完整属性，因此针对性的完整属性调整可以避免这种副作用。

为什么添加 background 简写属性后，我的 background-size: cover 失效了？

因为 background 简写属性会将所有未指定的背景完整属性重置为初始值，而 background-size 的初始值是 auto。如果 background-size: cover 设置在前面的规则中，而后面的 background: 声明省略了 size，该简写属性就会将其覆盖。解决方法是在简写属性中将 size 写在 position 之后，格式为 center / cover，或者将 background-size 完整属性放在简写属性之后。

flex: 1 和 flex: auto 有什么区别？

浏览器将 flex: 1 计算为 1 1 0%，flex-basis 为 0%，因此元素忽略自身内容尺寸，完全根据可用空间进行增长。flex: auto 展开为 1 1 auto，元素从内容尺寸出发再进行增长。需要等宽列且不受内容影响时使用 flex: 1，需要元素根据内容相对调整尺寸时使用 flex: auto。

border 简写属性中值的顺序重要吗？

不重要。border 简写属性中的宽度、样式和颜色值顺序无关紧要，因为它们的类型各不相同，所以 2px solid red 和 solid red 2px 是等价的。唯一的硬性要求是必须指定 border-style。其初始值为 none，因此如果没有样式关键字，无论提供什么宽度或颜色，边框都不会渲染。