CSS 可继承属性总结

CSS中有一类属性具有继承性，即父元素设置的这些属性值会自动传递给子元素。了解这些可继承属性对于高效编写CSS非常重要。

文本相关属性

字体属性

• font-family - 字体族
• font-size - 字体大小
• font-style - 字体样式（italic等）
• font-weight - 字体粗细
• font-variant - 字体变体（small-caps等）
• font - 字体简写属性

文本属性

• color - 文本颜色
• line-height - 行高
• letter-spacing - 字符间距
• word-spacing - 单词间距
• text-align - 文本对齐方式
• text-indent - 首行缩进
• text-transform - 文本转换（uppercase等）
• text-decoration - 文本装饰（但注意a标签默认不继承text-decoration）
• direction - 文本方向
• white-space - 空白处理方式

列表属性

• list-style-type - 列表项标记类型
• list-style-position - 列表项标记位置
• list-style-image - 列表项标记图像
• list-style - 列表简写属性

表格属性

• border-collapse - 表格边框合并方式
• border-spacing - 表格边框间距
• caption-side - 表格标题位置
• empty-cells - 空单元格显示方式

其他属性

• cursor - 鼠标指针样式
• visibility - 元素可见性
• quotes - 引号样式
• orphans - 控制分页时段落最小行数
• widows - 控制分页时段落末尾最小行数

不可继承的常见属性

以下是一些常见的不可继承属性：

• 盒模型属性：width, height, margin, padding, border等
• 定位属性：position, top, right, bottom, left, z-index等
• 背景属性：background, background-color, background-image等
• 显示属性：display, float, clear等

继承控制

可以使用以下值显式控制继承行为：

• inherit - 强制继承父元素的值
• initial - 使用属性的初始值
• unset - 如果是可继承属性则继承，否则使用初始值

实际应用技巧

1. 在body或:root上设置基础字体、颜色等，让整个页面继承
2. 对于需要覆盖继承值的情况，直接在元素上设置新值
3. 使用inherit关键字可以明确表示要继承父元素的值

理解CSS属性的继承特性可以帮助减少重复代码，创建更一致的设计系统。

标准盒模型 vs 怪异盒模型详解

盒模型是CSS布局的基础概念，决定了元素如何在页面中计算和分配空间。两种主要的盒模型模式有着根本性的差异。

1. 基本概念对比

2. 计算方式图解

标准盒模型 (content-box)

总宽度 = width + padding-left + padding-right + border-left + border-right
总高度 = height + padding-top + padding-bottom + border-top + border-bottom

怪异盒模型 (border-box)

总宽度 = width (已包含padding和border)
总高度 = height (已包含padding和border)

3. 实际示例

假设有如下CSS声明：

1
2
3
4
5

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

标准盒模型下的表现

1
2

实际占用宽度 = 200 + (20 * 2) + (5 * 2) = 250px
// 内容区宽度保持200px

怪异盒模型下的表现

1
2

实际占用宽度 = 200px (包含padding和border)
// 内容区宽度 = 200 - (20 * 2) - (5 * 2) = 150px

4. 如何切换盒模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* 设置为标准盒模型（默认） */
.element {
  box-sizing: content-box;
}

/* 设置为怪异盒模型 */
.element {
  box-sizing: border-box;
}

/* 全局设置为border-box（推荐做法） */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

5. 使用场景建议

标准盒模型适用场景

• 需要精确控制内容区域尺寸的情况
• 传统布局设计
• 需要与默认行为保持一致的项目

怪异盒模型适用场景（推荐）

• 响应式布局设计
• 百分比宽度布局
• 简化尺寸计算
• 现代Web开发（已成为行业最佳实践）

6. 历史背景

• 怪异模式起源于IE5/6时代的浏览器实现差异
• 现代浏览器通过box-sizing属性支持两种模式
• 目前主流框架（Bootstrap等）都默认使用border-box

7. 重要注意事项

1. padding和border：在标准模型中会扩大元素尺寸，在怪异模型中会向内挤压内容空间
2. margin：在两种模型中表现一致，始终不计入width/height
3. 替换元素：如<img>、<input>等在IE怪异模式下有特殊表现
4. Flex/Grid布局：盒模型设置会影响弹性项目和网格项的尺寸计算

理解这两种盒模型的差异对于精确控制页面布局至关重要，特别是在处理复杂响应式设计时。现代Web开发中，全局设置为border-box可以显著简化布局工作。