面试题：CSS 中 text-decoration 与 line-height 的常见应用场景

Question

请举例说明 text-decoration 与 line-height 在实际前端开发中的常见应用场景，并且阐述在不同场景下它们的取值可能有哪些，以及这样取值的原因。

Answer 1

text-decoration 的常见应用场景、取值及原因

1. 链接样式
   • 常见取值：underline、none。
   • 应用场景：在网页中，链接默认有下划线，通过设置 text-decoration: underline 可以明确显示链接的可点击性；而设置 text-decoration: none 可以去除链接默认的下划线，实现更简洁美观的设计，常用于导航栏链接样式调整。
   • 原因：underline 让用户直观地识别出可点击元素；none 则是为了满足多样化的设计需求，使导航栏等链接样式更符合整体页面风格。
2. 删除线效果
   • 常见取值：line-through。
   • 应用场景：在商品价格展示中，用于显示原价并划一条删除线，突出当前优惠价格。例如电商网站商品列表中，展示商品原价与折扣价时，原价使用 text-decoration: line-through 来呈现。
   • 原因：直观地向用户展示价格对比，强调价格变化，突出优惠力度。
3. 强调内容
   • 常见取值：overline（上划线）。虽然不常见，但某些特殊设计需求下会使用。
   • 应用场景：在标题或特定文本上添加一条上划线，起到强调或特殊标识的作用。比如在一些复古风格或特定主题的页面中，对特定标题使用上划线以营造独特氛围。
   • 原因：区别于普通文本，吸引用户注意力，强化特定文本的视觉效果。

line-height 的常见应用场景、取值及原因

1. 文本垂直居中
   • 常见取值：数值（如 1.5）、百分比（如 150%）、具体像素值（如 30px）。
   • 应用场景：在单行文本的按钮、标题等元素中，通过设置 line-height 等于元素的高度，实现文本在该元素内垂直居中。例如按钮上的文字，希望文字在按钮内垂直居中显示。
   • 原因：当 line-height 与元素高度相等时，文本在元素内上下间距均匀，从而达到垂直居中的视觉效果。
2. 多行文本排版
   • 常见取值：一般取值在 1.2 - 1.6 之间的数值。
   • 应用场景：文章段落、正文内容等多行文本区域。合适的 line-height 能使文本阅读起来更舒适，提升可读性。
   • 原因：取值过小会使文本行与行之间过于紧凑，阅读困难；取值过大则会使文本显得松散。在 1.2 - 1.6 这个范围能较好地平衡文本的紧凑度与可读性。
3. 不同字体大小下的适配
   • 常见取值：相对值（如 1.2em）。
   • 应用场景：当页面中有多种不同字体大小的文本，并且希望保持统一的行间距比例时使用。例如一个页面中有标题（较大字体）和正文（较小字体），使用相对值设置 line-height，可以确保在不同字体大小下，行间距都能按比例适配。
   • 原因：使用相对值可以根据字体大小动态调整行间距，保证整体页面文本排版的一致性和协调性。