行内级盒模型真的不比块级盒模型。。。
最近几天在搜各种博客,然后自己想总结出行内级盒模型所有的知识点
比如昨天写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的内容区是粉色背景区域啊
想不通为何这样,望各位不吝赐教,拜谢!