gpt4 book ai didi

css - 关于line-height的一些问题

转载 作者:行者123 更新时间:2023-11-28 19:07:18 24 4
gpt4 key购买 nike

font-size 等浏览器的默认 line-height16px 是多少?

我应该为哪些 HTML 元素定义 line-height,哪些不应该?

body { } 赋予行高的背后原因是什么?

line-height 对单行文本有影响吗?

如果我在 em 中使用字体,那么我是否也应该在 em 中使用 line-height

line-heightfont-size 之间的关系是什么?

最佳答案

根据我的经验,常见的默认行高似乎接近 1.2(对于 16 像素的字体 (16*1.2),这将是 ~19 像素)。在某些浏览器版本中,它大约是 1.1 - 但我不记得曾经在该范围之外看到过它。

line-height 属性从父级继承到子级 - 因此在 <body> 上指定 line-height将影响页面上的所有元素, 具有自己的行高属性集的元素及其后代元素除外。 (见下面的例子)

行高影响每个字符占据的高度 - 所以是的,它也对单行文本元素有影响。

行高分为三种基本类型:

  1. “相对”/“无单位”(例如 1.2)
  2. “固定”(例如 14px)
  3. “相对固定”(例如 1.2em)

相对(无单位)值将根据所有元素的字体大小按比例将等效行高应用于所有元素。同时,固定值 ( px) 不随字体大小改变。

有关“固定相对”变体(“em”值)的解释,请参阅 Eric Meyer 的博客文章“Unitless Line-Heights”。

每种口味在世界上都有它的位置。 :-)

以下是这三者的一个简短示例:

body {
font-size: 12px;
line-height: 1.5;
}
small {
font-size: 10px;
}
div {
line-height: 21px;
}
p {
line-height: 2em;
}

...

<body>
one
<small>two</small>
<div>
three
<small>four</small>
</div>
<p>
five
<small>six</small>
</p>
</body>

上面示例中的每个单词都有以下行高(翻译成 px )

  • 'one' == 18px(font-size 的 12px body 的 1.5 倍)
  • 'two' == 15px(font-size 的 10px small 的 1.5 倍)
  • '三' == 21px(固定 px 值)
  • 'four' == 21px(从 px 继承一个固定的 div 值)
  • '五' == 24px(font-size 的 12px p 的 2 倍(继承自 body ))
  • 'six' == 24px(从 p 继承一个(固定的)预计算值)

关于css - 关于line-height的一些问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2734076/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com