考察点分析

本题主要考察候选人对CSS核心机制的掌握程度，涉及以下维度：

  1. 样式继承机制：理解line-height不同值类型的计算与继承差异
  2. 格式化上下文：掌握BFC触发条件及解决布局问题的原理
  3. 字体适配能力：设计跨平台的系统字体降级方案

技术评估点：

  • 百分比与无单位值在继承时的计算差异
  • BFC的9种形成条件及margin折叠的解决原理
  • font-family字体栈的优先级配置技巧

技术解析

关键知识点

  1. line-height继承机制

    • 百分比值：基于当前元素的font-size计算，子元素继承计算后的绝对值
    • 无单位值：作为缩放因子继承，子元素按自身font-size重新计算

  2. BFC形成条件

      浮动元素（float非none）
绝对定位元素（position: absolute/fixed）
display: inline-block/table-cell/flex
overflow非visible（hidden/auto/scroll）
根元素（html）

  3. 字体降级方案

    • 优先使用系统级字体（-apple-system, Segoe UI）
    • 用通用字体族（sans-serif）兜底

问题解答

1. line-height继承差异

  • 百分比值：父元素line-height: 150%时，计算值为父font-size * 1.5，子元素继承该固定值
  • 无单位值：父元素line-height: 1.5时，子元素继承该比例，最终值为子font-size * 1.5

2. BFC解决margin重叠
BFC容器内的元素与其外部元素分属不同渲染上下文，阻止垂直margin合并。示例：

  <div style="overflow: hidden"> <!-- 触发BFC -->
  <p style="margin: 20px">...</p>
</div>

3. 系统字体降级

  body {
  font-family: 
    -apple-system, /* macOS/iOS */
    BlinkMacSystemFont, /* Chrome <56 */
    "Segoe UI", /* Windows */
    Roboto, /* Android */
    sans-serif; /* 通用兜底 */
}

解决方案

字体降级代码优化 

  .font-stack {
  font-family:
    system-ui, /* 标准系统字体 */
    -apple-system, BlinkMacSystemFont, /* 覆盖Apple设备 */
    "Segoe UI Adjusted", /* Windows 11优化版本 */
    "Segoe UI", /* Windows通用 */
    sans-serif; /* 最终回退 */
}

优化点：

  1. 新增system-ui通用标识符
  2. 处理Windows 11的渲染差异
  3. 所有字体名保持小写提高解析效率

深度追问

  1. 如何检测元素是否处于BFC？
    通过浏览器开发者工具的Layout面板查看上下文类型

  2. line-height: 2em与200%有何区别？
    两者计算值相同，但继承方式差异：em基于当前元素字体， 百分比基于父元素字体

  3. font-family中generic-family必须放在最后吗？
    是的，浏览器按顺序匹配，通用族放在末尾确保正确降级

Edit this page

Last updated 06 Mar 2025, 13:07 +0800 . history