在 CSS 中设置font-size: 100%时，元素的字体大小会继承父元素的字体大小。具体数值取决于父元素的字体大小设置或浏览器默认值。
1. 继承父元素的字体大小
-
示例：
<div style="font-size: 16px"> <p style="font-size: 100%"> <!-- 此元素字体大小为16px --> 文本内容 </p> </div> -
说明：
100%表示与父元素字体大小相同。若父元素未显式设置，则继承更上层元素的字体大小。
2. 浏览器默认字体大小
-
大多数浏览器的默认字体大小为16px，因此：
<body> <p style="font-size: 100%"> <!-- 默认为16px --> 文本内容 </p> </body> -
注意：用户可在浏览器设置中修改默认字体大小，此时
100%会跟随用户设置变化。
3. 与rem、em的对比
| 单位 | 基准 | 示例（假设根字体为 16px） |
|---|---|---|
100% | 父元素字体大小 | 父元素为 20px → 此元素 20px |
1em | 父元素字体大小 | 父元素为 20px → 此元素 20px |
1rem | 根元素（html）字体大小 | 根元素为 16px → 此元素 16px |
4. 常见应用场景
-
重置继承：在嵌套元素中恢复父级字体大小。
.child-element { font-size: 100%; /* 确保与父元素一致 */ } -
响应式设计：通过调整父元素字体大小，批量控制子元素。
@media (max-width: 768px) { body { font-size: 14px; /* 所有100%元素自动缩小 */ } }
5. 与用户字体偏好的关系
-
100%会尊重用户在浏览器中设置的字体大小，例如：- 用户将默认字体设为 “中” →
100%≈ 16px - 用户将默认字体设为 “大” →
100%≈ 20px
- 用户将默认字体设为 “中” →
总结
font-size: 100%= 父元素的字体大小。- 若父元素未设置字体大小，则继承浏览器默认值（通常为 16px）。
- 常用于需要与父元素保持一致字体大小的场景，或配合响应式布局动态调整。
