栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

内联元素和行高

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

内联元素和行高

这可能会造成混淆,因为在内联格式模型中,高度是不同的。

内联框的高度

的元素会

display: inline
生成一个内联框:

一个 行内框 是一个既行内和其内容参与其含有内嵌格式化的内容。

display
值为的不可替换元素将
inline
生成一个内联框。

line-height
确定该盒子]的高度:

内联框的高度将所有字形及其两边的前导部分包围起来,因此正好是“行高”

因此,您的盒子实际上

15px
很高。

线盒高度

还有线框:

在内联格式设置上下文中,框从一个包含块的顶部开始以一个接一个的水平排列。这些框之间应注意水平边距,边框和填充。这些框可以以不同的方式垂直对齐:它们的底部或顶部可以对齐,或者其中的文本基线可以对齐。包含形成线的框的矩形区域称为
线框

线框的高度由“ 线高计算 ”部分中给出的规则确定。

如果一个行框仅包含非替换的行内框与同

line-height
vertical-align
,那些规则说,行框的高度由下式给出
line-height

因此,就您而言,这也是

15px

内联框内容区域的高度

但是,您的浏览器的开发人员工具说

18px
。那是因为那
18px
是内容区域的高度。这也是由绿色背景绘制的内容区域(以及填充)。

请注意,这些

18px
可能会有所不同,因为CSS2.1没有指定算法:

内容区域的高度应基于字体,但是此规范未指定如何。UA可以例如使用字体的em-box或最大升序和降序。(后者将确保在em-box上方或下方具有部分内容的字形仍位于内容区域内,但导致不同字体的大小不同的box;前者将确保作者可以控制相对于’line-height’的背景样式。,但会导致字形在其内容区域之外绘画。)

如果UA实施第一个建议,则内容高度将由

font-size
决定,该高度决定了em-box。这就是您期望的,绿色框
15px
很高。

但是,大多数UA似乎都没有这样做。这意味着高度可能是

font-family
和中
font-size
使用的最高字形的高度。

但是使用

font-size
15px
并不意味着最高的字形也将
15px
很高。这取决于字体。这有点类似于
normal
的初始值
line-height
,定义为

告诉用户代理根据元素的字体将使用的值设置为“合理”的值。我们建议使用介于

1.0
到之间的“正常”值
1.2

这意味着,如果您使用

font-size: 15px
,则
line-height
15px
和之间将是“合理的”
18px
。Firefox认为“
Verdana”字体是最好的
18px
。在“ sans-serif”中,它使用
17px



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/464919.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号