CSS 中哪些属性可以继承？

在 CSS 中，继承是指给父元素设置一些属性，后代元素会自动拥有这些属性。

常见的可继承属性

  • 字体系列属性：
    • font：组合字体；
    • font-family：规定元素的字体系列；
    • font-weight：设置字体的粗细；
    • font-size：设置字体的尺寸；
    • font-style：定义字体的风格；
    • font-variant：偏大或偏小的字体。
  • 文本系列属性：
    • text-indent：文本缩进；
    • text-align：文本水平对齐；
    • line-height：行高；
    • word-spacing：增加或减少单词间的空白；
    • letter-spacing：增加或减少字符间的空白；
    • text-transform：控制文本大小写；
    • direction：规定文本的书写方向；
    • color：文本颜色。
  • 元素可见性：visibility。
  • 表格布局属性：
    • caption-side：定位表格标题位置；
    • border-collapse：合并表格边框；
    • border-spacing：设置相邻单元格的边框间的距离；
    • empty-cells：单元格的边框的出现与消失；
    • table-layout：表格的宽度由什么决定。
  • 列表属性：
    • list-style-type：文字前面的小点点样式；
    • list-style-position：小点点位置；
    • list-style：以上属性的简写。
  • 引用：quotes：设置嵌套引用的引号类型。
  • 光标属性：cursor：箭头可以变成需要的形状。

继承中比较特殊 / 无继承的属性

  • display：所有元素默认 display: block，但不会被继承。
  • 盒子模型属性：width、height、margin、padding、border。
  • 背景属性：background / background-color / background-image / background-position。
  • 定位属性：position、top、left 等。
  • 轮廓属性：outline。

补充：

  • 每个属性都通过规范定义了 Inherited: yes/no，可在 MDN 文档 中查看。
  • 控制继承的关键字：inherit（强制继承）、initial（使用初始值）、unset（有继承性则继承，否则使用初始值）、revert（回到 UA 默认）。
  • 现代工程中常通过 CSS 变量（--xxx）让"类似继承"的机制更可控。