浏览器开发人员工具-“计算与规则”选项卡
彼得
在“规则”选项卡下，我可以看到直接分配的样式，继承的样式或来自“用户代理样式表”的样式。如您所见line-height，这里没有设置。但是，当我切换到“计算”标签时，我看到的line-height是47px。为什么会这样，它从哪里来？它不应该位于“用户代理样式表”中“规则”选项卡下吗？我不太了解所有这些规则的分类方式，我认为“用户代理样式表”显示特定元素的所有默认样式。但是，事实并非如此。在此先感谢您为我解决此问题。
哈里
为什么行高未显示在“规则”选项卡下？
“line-height规则”标签中未显示，因为它不是标签的默认用户代理样式表的一部分h1。Safari的默认用户代理样式表可在此处找到。
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67__qem;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold
}
您在h1上面定义下看到的所有属性都显示在“规则”选项卡中，因为它们是用户代理默认样式表的一部分。但是，line-height它不是其中的一部分，因此不会在“规则”选项卡中显示。
如果它不属于UA样式表，为什么会在“计算”选项卡下显示它？
由于未指定line-height的值，因此使用了规范中指定的默认值（即normal）。在W3C规范说的情况如下：
值为'normal'将元素的字体的'line-height'设置为合理的值。建议UA将“正常”值设置为1.0到1.2范围内的数字。
如您所见，规格中有两点很重要：
- 将
line-height设置为元素font的合理值。因此，所使用的字体在确定中起着关键作用line-height。 - 该规范仅建议UA使用1.0到1.2作为值，而不是强制性要求。这意味着每个UA都可以确定一个它认为适合元素字体的数字。
因此，每个UA都会根据line-height其认为适当的值进行计算。由于UA实际上是在计算值，而不是从默认样式表中提取值，因此该值显示在“计算”选项卡下。
为什么对于32px的基本字体大小显示47px的值？
如前所述，没有固定的计算逻辑line-height。对于默认字体，当我设置font-size为2em（32px）且line-height显式设置为正常时，我得到的值是37px（大致等于line-height: 1.175）。
但是，当我使用您使用过的Indie Flower（Google字体）时body，的计算值line-height等于47px。您可以在下面的代码段中看到这一点，我在其中添加了三个h1标记-一个没有line-height设置，一个带有line-height: normal，另一个带有line-height: 47px。这三个高度都相同。因此，似乎UA确定与其他字体不同，此字体需要这么大的因素。
h1 {
display: inline-block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold;
background: red;
}
h1.withnumber {
line-height: 47px;
}
h1.normal {
line-height: normal;
}
body {
font-family: 'Indie Flower', cursive;
}<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Indie+Flower" />
<h1>Abcd</h1>
<h1 class='normal'>Abcd</h1>
<h1 class='withnumber'>Abcd</h1>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何从Google Chrome浏览器的“开发人员工具”的“来源”标签中保存整个文件夹？
- 2
Internet Explorer 11开发人员工具缺少调整大小选项
- 3
在浏览器开发人员工具控制台中从当前页面解析json
- 4
Firefox开发人员工具是否添加了新规则？
- 5
在Web开发人员工具中创建CSS规则
- 6
在最新的Chrome浏览器中禁用了GWT开发人员工具插件（37）。
- 7
浏览器开发人员工具：HTML元素的位置是什么？
- 8
开发人员工具“网络”选项卡，在“源”选项卡中打开脚本？
- 9
是否可以使用任何浏览器的开发人员工具来扩展整个dom树？
- 10
Power BI仪表板中的样式不同于开发人员工具的预览选项
- 11
Chrome的react-native应用程序上的Chrome的react开发人员工具未显示React选项卡
- 12
如何将开发人员工具停靠在Vivaldi Web浏览器中？
- 13
从开发人员工具中的选择元素中打印选项列表
- 14
保存来自Chrome（或其他浏览器）开发人员工具的所有XHR请求
- 15
macOS Catalina上的Safari-开发人员工具中缺少“调试器”选项卡吗？
- 16
从URL栏可见的Cookie，但在浏览器开发人员工具的“应用程序”选项卡中不可见
- 17
IE 11-开发人员工具和检测旧的IE浏览器
- 18
浏览器开发人员工具中的Discovery JavaScript执行路径和文件
- 19
如何在谷歌浏览器的开发人员工具中显示样式表的路径？
- 20
使用浏览器的开发人员工具时，是否可以显示JavaScript数组括号和对象的内容？
- 21
chrome开发人员工具在哪里显示元素的实际计算宽度
- 22
如何使用Firefox开发人员工具清除或删除浏览器会话
- 23
通过浏览器（铬）的“网络开发人员工具”从instagram保存图像
- 24
如何在Google Chrome浏览器检查器中更改CSS制表位（开发人员工具）
- 25
在浏览器的开发人员工具上拦截鼠标指针的更改
- 26
Firefox、开发人员工具和文件下载在单独的（临时）选项卡中
- 27
如何从 Web 浏览器开发人员工具中选择带有 Javascript 的选项
- 28
无法在 Firefox 开发人员工具中打开网络选项卡
- 29
chrome 开发人员工具 - 取消停靠源选项卡
我来说两句