【前端造火箭🚀】CSS 合集 3 (图文样式)

2022-08-24 121 阅读1分钟

CSS 合集 3 (图文样式)

1. line-height 如何继承

具体数值

如 <body> 元素的 line-height 设置为 50px，则 <p> 直接继承该值，line-height 为 50px

比例

如 <body> 元素的 line-height 设置为 1.5 时，则 <p> 直接继承该比例，即 line-height 为 <p> 的 font-size * 1.5

百分比（考点）

如 <body> 元素的 line-height 设置为 200% 时，则 <p> 继承计算出来的值，即 line-height 为 <body> 的 font-size * 200%

body {
  font-size: 20px;
  /* line-height: 50px; */
  /* line-height: 1.5; */
  line-height: 200%;
}

p {
  font-size: 16px;
  background-color: #ccc;
}

<body>
  <p>一行文字</p>
</body>