CSS 中可继承与不可继承属性有哪些？

在 CSS 中，属性是否可继承取决于其定义。继承意味着子元素会自动获得父元素某些属性的值，除非子元素显式地覆盖它。

以下是常见的可继承与不可继承属性分类：

✅ 可继承属性（Inherited Properties）

这些属性通常与文本、字体、颜色等视觉表现相关，子元素默认会继承父元素的值：

1. 字体相关

   • font-family
   • font-size
   • font-style
   • font-variant
   • font-weight
   • font（简写）

2. 文本相关

   • color
   • text-align
   • text-indent
   • text-transform
   • line-height（部分情况下）
   • letter-spacing
   • word-spacing
   • white-space
   • visibility

3. 列表相关

   • list-style-type
   • list-style-position
   • list-style-image
   • list-style（简写）

4. 其他

   • cursor
   • opacity（部分浏览器行为略有差异）
   • quotes

💡 提示：大多数与“内容呈现”相关的属性是可继承的。

❌ 不可继承属性（Non-Inherited Properties）

这些属性通常与布局、边框、背景、边距等相关，子元素不会自动继承父元素的值：

1. 盒模型相关

   • width,height
   • margin,padding
   • border及其子属性（如border-width,border-style,border-color）
   • outline

2. 背景相关

   • background及其子属性（如background-color,background-image）

3. 定位与布局

   • position,top,right,bottom,left
   • display
   • float,clear
   • overflow,z-index
   • flex,grid相关属性（如flex-direction,grid-template-columns）

4. 其他

   • clip
   • transform,transition,animation
   • box-shadow,text-shadow（注意：text-shadow不可继承）

💡 提示：大多数与“布局结构”或“装饰效果”相关的属性是不可继承的。

🔁 如何强制继承或阻止继承？

• 强制继承：使用inherit关键字

  .child{color:inherit;/* 显式继承父元素的 color */}

• 重置为初始值：使用initial或unset

  .child{font-size:initial;/* 使用浏览器默认值 */}

• 全局继承：使用all: inherit可继承所有可继承属性（谨慎使用）

📌 总结记忆技巧

理解哪些属性可继承，有助于编写更高效、简洁的 CSS 代码，减少重复声明。