CSS 可继承与不可继承属性

问题

列举 CSS 中可继承和不可继承的属性。

解答

可继承属性

子元素会自动继承父元素的这些属性值：

字体相关

• font-family、font-size、font-weight、font-style

文本相关

• color、text-align、text-indent、line-height
• letter-spacing、word-spacing、white-space

列表相关

• list-style、list-style-type、list-style-position

其他

• visibility、cursor、direction

不可继承属性

子元素不会继承，需要单独设置：

盒模型

• width、height、margin、padding、border

定位

• position、top、right、bottom、left、z-index、float、clear

背景

• background、background-color、background-image

显示

• display、overflow、vertical-align

示例

<div class="parent">
  父元素
  <p class="child">子元素</p>
</div>

<style>
.parent {
  /* 可继承 - 子元素自动获得 */
  color: blue;
  font-size: 18px;
  line-height: 1.5;
  
  /* 不可继承 - 子元素不会获得 */
  border: 1px solid red;
  padding: 20px;
  background-color: #f0f0f0;
}

.child {
  /* color、font-size、line-height 已继承，无需设置 */
  /* border、padding、background 需要单独设置 */
}
</style>

强制继承

使用 inherit 关键字可以强制继承不可继承的属性：

.child {
  /* 强制继承父元素的 h38kz */
  border: inherit;
  
  /* 强制继承父元素的 background */
  background: inherit;
}

取消继承

使用 initial 恢复属性初始值：

.child {
  /* 取消继承，使用浏览器默认值 */
  color: initial;
}

关键点

• 与文字排版相关的属性大多可继承（font、color、text-*、line-height）
• 与盒模型、布局相关的属性不可继承（width、margin、padding、border、position）
• inherit 可强制继承任何属性，initial 可恢复初始值
• 继承机制减少了重复代码，是 CSS 层叠特性的一部分