鼠标选中的真的是行内盒的内容区吗？这种情况该如何解释？

顺晟科技

2021-07-09 11:25:09

行内级盒模型真的不比块级盒模型。。。

最近几天在搜各种博客，然后自己想总结出行内级盒模型所有的知识点

比如昨天写demo的时候给span设置font-size：50px，为何谷歌渲染结果却为65.6px?

查阅得知受字体字号的影响，字体设计有em-square比作用来盛放字符的金属容器，然后字体的各种度量如ascender升部、descender降部等等...

我的谷歌默认字体是微软雅黑

所以50 x (2703/2048) ≈ 65.6

而很多博客把鼠标选中的区域为行内级盒参与行内格式化生成的行内盒的内容区

确实是，然而在测试块级盒子的line-height指定了该容器内行盒的最小高度时

#container{  
   background-color: rgb(200, 200, 200);  
} 
#strut{    
   background-color: pink;    
}
#text{    
   font-size:12px;    
   background-color: pink;    
}  

<body>
  <div id='container'>   
    <span id='strut'>x</span>   
    <span id='text'>text</span>   
  </div>
</body>

内容区加了背景颜色

对于块容器而言，容器的高度是由行盒撑开的

验证了此时行盒的高度的line-height：normal * 16px = 21.12 = div的高度

但是当我用鼠标选中第而个span时：

不是说鼠标选中的是内容区吗？这个span的内容区是粉色背景区域啊

想不通为何这样，望各位不吝赐教，拜谢！

上一篇：没有标签包裹的文本，这个高度怎么来的下一篇：vue 生命周期问题

网站建设

Html

鼠标选中的真的是行内盒的内容区吗？这种情况该如何解释？