【CSS】line-height: 120% 和 line-height: 1.2有什么区别？

<think>我们正在讨论CSS中的line-height属性设置为150%的含义和效果。根据引用[1]和[2]中的信息，我们可以知道：-line-height:150%表示行高为当前元素字体大小的150%。-这个设置会影响当前元素内所有子元素的行高，因为子元素会继承父元素计算后的行高值（以像素等绝对单位计算的值）。例如，假设我们有一个父元素设置如下：```css.parent{font-size:16px;line-height:150%;/*计算为16px*1.5=24px*/}```那么，父元素的行高实际计算为24像素。同时，父元素内的子元素（即使子元素设置了不同的字体大小）也会继承这个24px的行高值。引用[2]中明确指出：`line-height:150%`和`line-height:1.5em`的效果是一样的，都是基于设置该行高的元素的字体大小来计算行高，并且子元素继承的是计算后的行高值（绝对长度值）。对比`line-height:1.5`（无单位数值），则子元素会继承这个比例因子（1.5），然后根据子元素自己的字体大小计算行高。因此，`line-height:150%`的具体含义是：行高等于该元素字体大小的1.5倍，并且这个计算后的值会被子元素继承。效果：1.对于设置该属性的元素：行高=自身字体大小×150%2.对于该元素内的子元素：无论子元素的字体大小如何，它们都将继承父元素计算后的行高（一个固定的长度值，比如24px），而不是比例因子。这可能导致子元素的行高与字体大小不成比例，如果子元素的字体大小与父元素不同。举例：```html<divstyle="font-size:16px;line-height:150%;">父元素文本<pstyle="font-size:30px;">子元素文本</p></div>```-父元素的行高：16px*150%=24px-子元素的行高：继承父元素计算后的行高24px，而不是30px的150%（45px）。因此，子元素的行高只有24px，而字体大小为30px，这可能导致文本重叠（因为行高小于字体大小）。所以，使用百分比单位设置行高时，需要注意继承问题。如果希望子元素根据自身字体大小动态调整行高，则应该使用无单位的数值（如`line-height:1.5`），这样每个元素都会根据自身的字体大小计算行高。总结：-`line-height:150%`：行高为当前元素字体大小的150%，计算后的值（固定长度）会被子元素继承。-效果：在当前元素上，行高按比例放大；在子元素上，行高固定为继承值，不会随子元素字体大小变化。</think>### CSS `line-height: 150%` 的具体含义及效果 `line-height: 150%` 表示**行高设置为当前元素字体大小的 1.5 倍**。具体效果和计算规则如下： #### 1. **计算方式** - 计算公式：`行高值 = 当前元素的 font-size × 150%` - 示例： - 若元素 `font-size: 16px`，则行高为 `16px × 1.5 = 24px` - 若元素 `font-size: 20px`，则行高为 `20px × 1.5 = 30px` #### 2. **继承特性** - **子元素继承计算后的绝对值**（而非百分比）： ```html <div style="font-size: 16px; line-height: 150%;"> 父元素文本 <p style="font-size: 32px;">子元素文本</p> </div> ``` - 父元素行高：`16px × 1.5 = 24px` - 子元素继承的是 `24px` 的绝对行高值（非 `32px × 1.5`）[^2] #### 3. **视觉效果** - **行间距增加**：行间距 = `line-height - font-size` 例如 `font-size: 16px` 时，行间距为 `24px - 16px = 8px`[^3] - **文本垂直居中**：文本在行高范围内自动垂直居中 - **多行文本间距**：行与行之间的空白区域增大，提升可读性 #### 4. **对比其他单位** | 写法 | 计算方式 | 继承特性 | |---------------|----------------------------|----------------------| | `line-height: 150%` | 基于自身字体大小计算绝对值 | 子元素继承绝对值 | | `line-height: 1.5` | 基于自身字体大小计算比例 | 子元素继承比例值 | | `line-height: 24px` | 固定绝对值 | 子元素继承固定值 | > **关键区别**： > 使用百分比时，子元素继承的是父元素计算后的**固定行高值**，而非比例。若子元素字体更大，可能出现行高不足导致文字重叠[^2]。 #### 5. **实际应用场景** - **正文排版**：适合段落文本（如 `font-size: 16px + line-height: 150%`） - **避免场景**：嵌套结构中字体大小差异大的元素（可能需改用 `line-height: 1.5`） ### 示例演示 ```html <div style="font-size: 16px; line-height: 150%; background: #f0f0f0; padding: 10px;"> 父元素文本（行高24px） <div style="font-size: 24px; background: #e0e0e0;"> 子元素文本（继承行高24px，与字体相同，可能重叠） </div> </div> ``` 效果：子元素因行高（24px）等于字体大小（24px），文本将紧密排列甚至重叠。 ---