为什么通用选择器的行高表现很奇怪？

发布于 2025-01-17 08:21:36 字数 2067 浏览 3 评论 0原文

据我所知，在 css 中，我们将 line-height 设置为整数，因为如果我们更改子元素中的字体大小，那么它会重新计算适当的值。除了通用选择器之外，这工作正常，因为如果我在通用选择器中设置 line-height:1.5em ，它不会创建重叠。但是，如果我在 div 中设置 line-height:1.5em ，则会产生重叠。

 *    {    line-height: 1.5em;       }

div  {   }

span {  font-size:4em;    }

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

 *    {           }

div  {  line-height:1.5em;  }

span {  font-size:4em;    }

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start  span overlap line-height:1.5em; inside parent hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

原文

As I know in css we set line-height as integer because if we change font size in child elements then it recalculate appropriate value. This works fine except with universal selector because if I set line-height:1.5em in universal selector it does not create overlap. However, if I set line-height:1.5em in div it creates overlap.

 *    {    line-height: 1.5em;       }

div  {   }

span {  font-size:4em;    }

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

 *    {           }

div  {  line-height:1.5em;  }

span {  font-size:4em;    }

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start  span overlap line-height:1.5em; inside parent hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吃颗糖壮壮胆 2025-01-24 08:21:36

通用选择器没有错。
第一个示例之所以起作用的原因是因为通用选择器指定div和span 行高 to 1.5 EM其Orignial 线路高。

You specify the line-height for span here

For example two, you doesn't specify the line-height for span, so its line-height property will inherted from its parent container which is div (24 px line height)

Note that line-height is

console.log(window.getComputedStyle(document.querySelector('span')).lineHeight)
console.log(window.getComputedStyle(document.querySelector('div')).lineHeight)

*    {           }

div  {  line-height:1.5em;  }

span {  font-size:4em; 
}

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start  span overlap line-height:1.5em; inside parent hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

There is nothing wrong with universal selector.
The reason that that first example works because universal selector specify div and span both of them line heightto 1.5 em of its orignial line-height.

You specify the line-height for span here

For example two, you doesn't specify the line-height for span, so its line-height property will inherted from its parent container which is div (24 px line height)

Note that line-height is inherted.

console.log(window.getComputedStyle(document.querySelector('span')).lineHeight)
console.log(window.getComputedStyle(document.querySelector('div')).lineHeight)

*    {           }

div  {  line-height:1.5em;  }

span {  font-size:4em; 
}

<div>ghghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhhghghfghdfhdhhghdhdfghfhhgfhfhghdhghgh<br>hfghdfghdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br>   <span>start  span overlap line-height:1.5em; inside parent hfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhofhfh<br>fhfhfhfhfhfhfhfhfhfhfhfhfhfhfgfgdfggdfgdfsgdfgdsfhjjghjhjfghjhfgjh end</span><br>.fhhhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhfhjhjjghjghjhgjhgjghhfhhh</div>

回复收藏 0 原文

~没有更多了~