CSS 属性关键字
CSS中有一些关键字，在很多属性当中都可以使用，它们根据功能职责，严格分为以下三大类：
级联与继承控制
这 5 个关键字适用于所有 CSS 属性（如 color、display、margin 等），用来干预样式的“来源链条”。
即告诉浏览器：“这个值，你该从‘父亲’拿、从‘课本’拿、还是从‘祖宗’那拿？”
| 关键字 | 核心逻辑 | 针对 color 属性的举例 |
|---|---|---|
inherit |
“强制继承父级” —— 无视默认规则，父元素是什么计算值，我就必须是什么。 | 父级文字是红色，我强制设为 inherit，我就必须是红色。 |
initial |
“恢复规范初始值” —— 无视父级，直接采用 CSS 官方规范里写死的出厂设置。 | color 的规范初始值是 black（黑色），无论父级是什么色，我都会变黑。 |
unset |
“看属性脸色行事” —— 先问该属性默认是否继承？ ① 默认继承（如 color）→ 等价于 inherit（听爸爸的）；② 默认不继承（如 border）→ 等价于 initial（听课本的）。 |
对于 color（可继承），它等价于 inherit，跟随父级颜色。 |
revert |
“跳过爸爸，听祖宗的” —— 忽略所有开发者自定义的父级样式，直接找回浏览器内置的默认样式（User Agent Stylesheet）。 | display: revert 在 <div> 上是 block，在 <span> 上是 inline（浏览器自带的区分）。 |
revert-layer |
“仅撤回上一层” —— 只在使用了 @layer（级联层）架构时生效。它撤回当前级联层的样式，回落到上一个级联层的定义。若无 @layer 结构，则等价于 revert。 |
常用于组件库封装，用于撤销当前组件层对基础层的样式污染。 |
initial 与 revert 区别
initial 与 revert在理解上存在困难，都表示恢复默认值。但它们的区别在于，initial 是恢复规范默认值，而 revert 是恢复浏览器默认值。
| 对比维度 | initial（听“课本”的） |
revert（听“祖宗”的） |
|---|---|---|
| 参照物 | CSS 官方规范（W3C 标准） | 浏览器内置默认样式表（User Agent Stylesheet） |
| 核心逻辑 | 不管标签类型，一律强制变回 CSS 规范写死的“出厂默认值” | 跳过开发者自定义样式，直接找回浏览器针对该特定标签自带的默认样式 |
| 是否区分元素类型 | 否（一刀切） | 是（看标签下菜碟） |
对 <div> 的 display 效果 |
变成 inline（丢失块级特性） |
变成 block（恢复块级本色） |
对 <span> 的 display 效果 |
变成 inline（保持不变） |
变成 inline（保持不变） |
对 <li> 的 list-style-type 效果 |
变成 disc（无论 <ul> 还是 <ol> 都变圆点） |
<ul> 下是 disc，<ol> 下是 decimal（智能识别） |
| 是否受浏览器版本差异影响 | 否（规范值全球统一） | 是（不同浏览器内置样式有细微差别） |
| 典型适用场景 | 彻底剥离所有样式污染，让元素变成“白纸”状态 | 恢复元素的“本职工作”（如让按钮变回浏览器默认按钮模样） |
一句话总结
initial：“机器语言”——无视标签，统一回归规范底稿。revert：“母语本能”——尊重标签，恢复浏览器天生赋予的模样。
/* 初始状态 */
div { display: flex; } /* 假设被改成了弹性盒子 */
/* 方案一：initial */
div { display: initial; }
/* 结果：div 变成 inline（规范初始值），彻底丢失块级和 flex 特性 */
/* 方案二：revert */
div { display: revert; }
/* 结果：div 变成 block（浏览器默认值），恢复块级本色 */尺寸
它们不是全局关键字，仅适用于 width、height、flex-basis、grid-template-columns 等尺寸属性，专治盒子“宽高”与“内容”的关系。
| 关键字 | 核心逻辑（以宽度 width 为例） |
表现效果（通用场景） |
|---|---|---|
min-content |
“内容的绝对底裤” —— 将盒子压缩到最极端状态，宽度取最长连续不可换行单元（如最长英文单词）的宽度。 | 盒子窄到不能再窄，绝不主动换行，直到碰到硬性换行符或超长单词。 |
max-content |
“内容的理想国” —— 让盒子宽度完全铺开，内部文本绝不换行，内容有多宽，盒子就撑多宽。 | 无视父容器边界，盒子直接横向溢出，像一张无限长的横幅。 |
fit-content |
“识时务的俊杰” —— 公式为 min(max-content, max(min-content, 可用空间))。即：① 父容器够宽，就用 max-content（内容撑开）；② 父容器狭窄，就自动换行适配父容器宽度。 |
表现类似于 display: table 或 width: auto 带 max-content 的效果，刚刚好不溢出也不浪费空间。 |
优先级修饰符
仅用于紧急覆写第三方顽固样式或调试，日常业务代码中慎用，否则会严重破坏 CSS 的可维护性。
| 关键字 | 核心逻辑 |
|---|---|
!important |
“破除级联的尚方宝剑” —— 它不是属性值本身，而是写在值末尾的优先级标志。一旦加上，该条声明会升至最高优先级，无视选择器权重和源码顺序，强行覆盖普通样式。 |
速查口诀
- 管“来源回溯”的（全属性通用）：
inherit（爸爸）、initial（课本）、unset（看脸色）、revert（祖宗）、revert-layer（上一层）。 - 管“尺寸计算”的（仅宽高/网格）：
min-content（最窄底线）、max-content（最宽撑爆）、fit-content（自适应刚好）。 - 管“权重压制”的（标记符号）：
!important（强行上位）。