面试题：CSS 中可继承与不可继承属性有哪些？

在 CSS 中，属性的继承（Inheritance） 是指子元素自动从父元素“继承”某些样式属性的机制。理解哪些属性可继承、哪些不可继承，对于高效编写 CSS 和避免样式混乱至关重要。

一、什么是继承？

当一个元素没有设置某个 CSS 属性时，它会自动使用其父元素的该属性值。
继承发生在文档树的父子关系中，而不是 DOM 操作或 CSS 选择器。
继承只影响未显式设置该属性的子元素。

✅ 示例：
<div style="color: red; font-size: 16px;">
   <p>这段文字是红色的，16px 大小。</p>
 </div>
<p> 元素没有设置 color 和 font-size，因此继承了父元素的值。

二、可继承的属性（通常与文本相关）

以下属性默认可继承：

1. 文本相关

color：文本颜色。
font-family：字体。
font-size：字体大小。
font-style：字体风格（如 italic）。
font-weight：字体粗细（如 bold）。
font-variant：小型大写字母（small-caps）。
line-height：行高。
text-align：文本对齐方式（left, center, right, justify）。
text-indent：首行缩进。
text-transform：文本转换（uppercase, lowercase, capitalize）。
letter-spacing：字母间距。
word-spacing：单词间距。
white-space：空白处理方式（normal, nowrap, pre 等）。
direction：文本方向（ltr, rtl）。
unicode-bidi：双向文本算法。

2. 列表相关

list-style：列表样式（包括 list-style-type, list-style-position, list-style-image）。
list-style-type：项目符号类型（如 disc, circle, square）。

3. 光标样式

cursor：鼠标指针样式（如 pointer, help, wait）。

4. 其他

visibility：可见性（visible, hidden）。
注意：display: none 不可继承，但 visibility: hidden 可继承。

三、不可继承的属性（通常与布局、盒模型相关）

以下属性默认不可继承：

1. 盒模型

width、height
margin、padding
border（包括 border-width, border-style, border-color）
box-sizing

2. 定位与浮动

position（static, relative, absolute, fixed）
top、right、bottom、left
z-index
float、clear

3. 背景

background（包括 background-color, background-image, background-position 等）
opacity

4. 布局模型

display
flex 相关属性（如 flex-direction, justify-content）
grid 相关属性
overflow

5. 变换与动画

transform
transition
animation

6. 轮廓

outline（包括 outline-color, outline-style, outline-width）

四、如何控制继承？

CSS 提供了四个通用值，可以显式控制继承行为：

值	作用
`inherit`	强制继承父元素的值。
`initial`	使用该属性的默认值（不继承）。
`unset`	如果属性可继承，则表现如 `inherit`；否则如 `initial`。
`revert`	将属性重置为“用户代理样式”或层叠中的前一个值。

✅ 示例：

.child {
   color: inherit;     /* 强制继承颜色 */
   margin: initial;    /* 重置 margin 为默认值（0） */
   display: unset;     /* 如果 display 可继承则继承，否则为 initial */
 }

五、常见误区与注意事项

display: none 不可继承，但影响子元素
虽然 display 不可继承，但父元素 display: none 会使所有子元素也不显示（因为元素被移除）。
visibility: hidden 可继承，但子元素可覆盖
子元素可通过 visibility: visible 强制显示。
font-size: 100% vs inherit
- 100%：相对于父元素计算（可能受继承影响）。
- inherit：直接使用父元素的计算值。
并非所有文本属性都可继承
例如 text-shadow 不可继承。

六、总结

类别	可继承属性	不可继承属性
典型代表	`color`, `font-*`, `text-align`	`width`, `margin`, `padding`, `border`, `display`, `position`
共同特点	与文本呈现相关	与布局、几何、定位相关

核心要点：

可继承属性：主要是文本样式，让页面整体风格统一。
不可继承属性：主要是布局和盒模型属性，确保元素独立控制。
使用 inherit、initial、unset 可以精确控制继承行为。
理解继承机制有助于减少重复代码，提高 CSS 的可维护性。

在实际开发中，合理利用继承可以减少样式表体积，但也要注意避免意外的样式传递。

THE END

前端 CSS 面试题