当前位置： 首页 > news >正文

【CSS in Depth 2精译】2.5 无单位的数值与行高

news 2026/5/19 21:10:27

当前内容所在位置

  • 第一章 层叠、优先级与继承
  • 第二章 相对单位
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高 ✔️
    • 2.6 自定义属性
    • 2.7 本章小结

2.5 无单位的数值与行高

有些属性允许使用无单位的数值（unitless values，即没有指定单位的数字）。支持无单位值的属性（properties）包括 line-height、z-index 和 font-weight（700 相当于 bold 粗体字；400 相当于 normal 常规大小等等）；此外，还可以在任何设置长度单位（如 px、em 或 rem）的地方使用无单位数值 0，因为在这些情况下单位并不重要——0px、0%、0em 均等效。

警告

无单位的 0 只能用于长度值和百分比，例如内边距（paddings）、边框（borders）和宽度（widths）；0 不可用于角度值，例如度，或者与时间相关的值，例如秒。

line-height 属性比较特殊，其属性值既可以是带单位的值，也可以不带单位。通常应该使用无单位的值，因为二者的继承方式有所不同。让我们在页面中输入文字，看看不带单位的行高是什么效果。按如下代码更新页面：

代码清单 2.15 继承 line-height 的 HTML

<body><p class="about-us">We have built partnerships with small farms around the world tohand-select beans at the peak of season. We then carefully roast insmall batches to maximize their potential.</p>
</body>

接下来给 body 正文元素指定行高，并让页面其他元素继承该行高。可以看到，无论怎么调整页面字号，行高都会正常显示（如图 2.12 所示）：

图 2.12 图 为每个后代元素重新计算无单位的行高，往往会产生间距适中的文本行
图 2.12 图 为每个后代元素重新计算无单位的行高，往往会产生间距适中的文本行

按代码清单 2.16 更新样式表。该段落的行高为继承过来的 1.2。由于字号为 32px（2em × 16px，浏览器默认值），因此本地计算的行高为 38.4px（32px × 1.2）。这将在行与行之间留出适当的空间。

代码清单 2.16 无单位的数值定义的行高

body {line-height: 1.2;  /* 后代元素继承了无单位的值 */
}
.about-us {font-size: 2em;
}

如果用带单位的值来设置行高，则可能产生意想不到的结果，如图 2.13 所示，每行文字会相互重叠。代码清单 2.17 为对应的 CSS 样式。

图 2.13 使用带单位的行高在继承给子元素时间距可能达不到预期
图 2.13 使用带单位的行高在继承给子元素时间距可能达不到预期

代码清单 2.17 用带单位的值定义行高，产生了意想不到的结果

body {line-height: 1.2em; /* 后代元素继承了计算值（19.2px） */
}
.about-us {font-size: 2em; /* 计算值为 32px */
}

这些效果是由于继承的一个怪异特性所造成的：当一个元素的值是用长度（px、em、rem 等）定义时，其 计算值 会被子元素继承。当使用 em 等相对单位设置行高时，它们的具体大小会被先计算出来，然后再将该计算值继承给子元素。对于行高 line-height 属性，如果子元素的字号与该计算值对应的字号不一致，就会导致像文字重叠这样意想不到的结果。

而当使用的是无单位数值时，被继承的是该声明值，也就是说其计算值将在每个继承的子元素中重新计算。这样得出的结果几乎总是我们所希望的。我们可以用一个无单位的数值给 body 设置行高，之后就不用修改了，除非个别地方需要其他不一样的行高。

相关文章：

【CSS in Depth 2精译】2.5 无单位的数值与行高

当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高 ✔️2.6 自定义属性2.7 本章小结 2.5 无单位的数值与行高 有些属性允许使用无单位的数值&#xff08;unitless value…...

编程日记 2024/7/11 18:31:09

【人脸识别、Python实现】PyQt5人脸识别管理系统

PyQt5人脸识别管理系统 项目描述主要功能效果展示获取源码 项目描述 接的一个基于宿舍管理系统与人脸识别的小单子。然后我把它优化了一些&#xff0c;现在开源一下。有需要的小伙伴自取&#xff0c;点个免费的关注就行 主要功能 1、录入学生基本信息、录入人脸 2、主页面展…...

编程日记 2024/7/11 18:29:05

软设之观察者模式

设计模式中&#xff0c;观察者模式的意图是:定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 比如说&#xff0c;有一个新闻网站&#xff0c;订阅的用户众多&#xff0c;假如说管理员发布了一…...

编程日记 2024/7/11 18:28:04

deep learning 环境配置

1 NVIDIA驱动安装 ref link: https://blog.csdn.net/weixin_37926734/article/details/123033286 2 cuda安装 ref link: https://blog.csdn.net/qq_63379469/article/details/123319269 进去网站 https://developer.nvidia.com/cuda-toolkit-archive 选择想要安装的cuda版…...

编程日记 2024/7/11 18:27:03

09磁盘管理

一、磁盘管理 1.磁盘基础知识 &#xff08;1&#xff09;磁盘接口类型 个人电脑&#xff0c; 硬盘接口分为IDE类型和SATA类型 服务器版分为SCSI类型和SAS类型 &#xff08;2&#xff09;磁盘命名方式 windows中硬盘命名方式是c&#xff0c;d,e盘 linux中硬盘命名方式为 系统…...

编程日记 2024/7/11 18:25:01

Node.js Stream

Node.js Stream Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它允许开发者使用 JavaScript 编写服务器端代码。Node.js 的一个核心特性是其对流&#xff08;Stream&#xff09;的处理能力。流是一种在 Node.js 中处理读/写文件、网络通信或任何端到端…...

编程日记 2024/7/11 18:22:59

简化嵌入式Linux开发：在Ubuntu上安装和配置交叉编译环境的高效方法

在嵌入式Linux开发中&#xff0c;我们通常需要在Ubuntu上安装交叉编译工具链&#xff0c;并配置相关文件。编译过程中&#xff0c;如果遇到依赖库问题&#xff0c;还需要手动查找并编译开源源码。这些步骤较为繁琐&#xff0c;为了简化操作&#xff0c;我们可以尝试以下方案&am…...

编程日记 2024/7/11 18:21:58

Photoshop批量处理图片分辨率

整理一些文件的时候&#xff0c;发现需要处理大量图片的尺寸和分辨率。如果一张一张的处理就会很慢&#xff0c;搜了下&#xff0c;Photoshop提供自动批量处理的方法。在此记录一下。 一、说说批量处理图片 1.打开PS软件并导入图片&#xff0c;我用的是比较老的版本cs4&#…...

编程日记 2024/7/11 18:17:53

TCP协议的三次握手和四次挥手（面试）

三次握手 首先可以简单的回答&#xff1a; 1、第一次握手&#xff1a;客户端给服务器发送一个 SYN 报文。 2、第二次握手&#xff1a;服务器收到 SYN 报文之后&#xff0c;会应答一个 SYNACK 报文。 3、第三次握手&#xff1a;客户端收到 SYNACK 报文之后&#xf…...

编程日记 2024/7/11 18:16:51

css看见彩虹，吃定彩虹

css彩虹 .f111 {width: 200px;height: 200px;border-radius: 50%;box-shadow: 0 0 0 5px inset red, 0 0 0 10px inset orange, 0 0 0 15px inset yellow, 0 0 0 20px inset lime, 0 0 0 25px inset aqua, 0 0 0 30px inset blue, 0 0 0 35px inset magenta;clip-path: polygo…...

编程日记 2024/7/11 18:15:50

springboot在线教育平台-计算机毕业设计源码68562

摘要 在数字化时代&#xff0c;随着信息技术的飞速发展&#xff0c;在线教育已成为教育领域的重要趋势。为了满足广大学习者对于灵活、高效学习方式的需求&#xff0c;基于Spring Boot的在线教育平台应运而生。Spring Boot以其快速开发、简便部署以及良好的可扩展性&#xff0c…...

编程日记 2024/7/11 18:14:49

形态学图像处理

1 工具 1.1 灰度腐蚀和膨胀 当平坦结构元b的原点是(x,y)时&#xff0c;它在(x,y)处对图像f的灰度腐蚀定义为&#xff0c;图像f与b重合区域中的最小值。结构元b在位置(x,y)处对图像f的腐蚀写为&#xff1a; 类似地&#xff0c;当b的反射的原点是(x,y)时&#xff0c;平坦结构元…...

编程日记 2024/7/11 18:13:48

安泰电压放大器的选型方案是什么

电压放大器是一种常见的电路元件&#xff0c;广泛应用于各种电子设备中。在选择电压放大器的时候&#xff0c;我们需要考虑一系列因素&#xff0c;以确保选型方案能够满足实际需求。下面安泰电子将详细介绍电压放大器选型的主要考虑因素&#xff0c;包括应用需求、技术性能、成…...

编程日记 2024/7/11 18:12:46

ARMV8安全特性：Pointer Authentication

文章目录 前言一、Introduction二、Problem Definition三、Pointer Authentication3.1 Instructions3.2 Cryptography3.3 Key Management 四、Sample Use Cases4.1 Software Stack Protection4.2 Control Flow Integrity (CFI)4.3 Binding Pointers to Addresses 五、Security …...

编程日记 2024/7/11 18:11:45

MySQL和Redis更新一致性问题

1. 先更新数据库&#xff0c;再更新缓存 适用场景&#xff1a;适用于对数据一致性要求不是特别高&#xff0c;且缓存更新失败对 系统影响较小的场景。例如&#xff0c;某些非关键数据的缓存更新。 风险&#xff1a;如果缓存更新失败&#xff0c;会导致数据库和缓存数据不一致。…...

编程日记 2024/7/11 18:09:43

（19）夹钳(用于送货)

文章目录 前言 1 常见的抓手参数 2 参数说明 前言 Copter 支持许多不同的抓取器&#xff0c;这对送货应用和落瓶很有用。 按照下面的链接&#xff08;或侧边栏&#xff09;&#xff0c;根据你的设置了解配置信息。 Electro Permanent Magnet v3 (EPMv3)Electro Permanent M…...

编程日记 2024/7/11 18:08:42

安装lap和cython_bbox失败了很多次！！！终于被我发现了！

先说 lap 试了很多种方式&#xff0c;pip install lap / conda install -c conda-forge lap … 全失败了后面发现 lap 不支持 python > 3.9 的版本使用 pip install lapx 成功&#xff01; cython_bbox 更难了 一直提示缺少MicroSoft C 14.0 … 大家有需要自行下载&#x…...

编程日记 2024/7/11 18:06:40

异业联盟整合各大行业门店，共享资源

异业联盟系统是一种将不同行业的企业或商家整合在一起&#xff0c;通过资源共享、优势互补、合作推广等方式&#xff0c;实现共同发展和互利共赢的商业合作模式的数字化管理和运营系统。 其具有以下显著优势&#xff1a; 1.拓展客户群体&#xff1a;不同行业的企业联合起来&am…...

编程日记 2024/7/11 18:04:38

前端如何去看蓝湖

首先加入团队&#xff0c;在内容中我们可以看到点击图片&#xff0c;右边出现的图 包含了像素甚至有代码&#xff0c;我们可以参考这个代码。 那么在使用之前我们需要调整好像素&#xff0c;例如我们的像素宽为375&#xff0c;不用去管高&#xff0c;然后这个宽度我们可以去自…...

编程日记 2024/7/11 18:00:34

HTML+CSS+JS 实现3D风吹草动效果（B站视频）

效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>3D effect&…...

编程日记 2024/7/11 17:59:32

编程统计员工午休时长，下午工作效率数据，划定合理休息时间，科学提升全天职场整体工作产能。

基于商务智能&#xff08;BI&#xff09;思想的「员工午休时长 vs 下午工作效率」分析系统&#xff0c;保持中立、去营销化、无引流。一、实际应用场景描述某中型互联网团队发现&#xff1a;- 有人午休时间过长&#xff0c;下午精神仍不佳- 有人午休过短&#xff0c;下午效率明…...

编程新知 2026/5/19 20:27:25

Artisan烘焙软件终极指南：5步解决咖啡烘焙品质不稳定难题

Artisan烘焙软件终极指南&#xff1a;5步解决咖啡烘焙品质不稳定难题 【免费下载链接】artisan artisan: the worlds most trusted roasting software 项目地址: https://gitcode.com/gh_mirrors/ar/artisan 你是否曾为咖啡烘焙结果的不稳定性而烦恼&#xff1f;同一款咖…...

编程新知 2026/5/19 20:14:33

深度解析causal-conv1d：CUDA加速的因果深度卷积专业指南

深度解析causal-conv1d&#xff1a;CUDA加速的因果深度卷积专业指南 【免费下载链接】causal-conv1d Causal depthwise conv1d in CUDA, with a PyTorch interface 项目地址: https://gitcode.com/gh_mirrors/ca/causal-conv1d causal-conv1d是一个专为时间序列数据优化…...

编程新知 2026/5/19 19:12:25

Google 的 IDE 演进小史

不知道你平时用的 IDE 是什么&#xff1f;小七的工程师同事有在用 Vim 的&#xff0c;也有 Emacs 党&#xff0c;IntelliJ 全家桶也有人在用&#xff0c;用得最多的可能是 VS Code。只要代码能写好、工具链能跑通&#xff0c;似乎大家没有必要使用同一个 IDE。 Google 早年也是…...

编程新知 2026/5/19 18:05:25

专业级LaTeX排版：深度解析中国科学技术大学学位论文模板括号使用的最佳实践

专业级LaTeX排版&#xff1a;深度解析中国科学技术大学学位论文模板括号使用的最佳实践 【免费下载链接】ustcthesis LaTeX template for USTC thesis 项目地址: https://gitcode.com/gh_mirrors/us/ustcthesis 在学术论文写作中&#xff0c;细节决定专业水准。中国科学…...

编程新知 2026/5/19 17:07:54

PlotSquared 终极指南：如何在 Minecraft 服务器上安装和配置强大的领地管理插件

PlotSquared 终极指南&#xff1a;如何在 Minecraft 服务器上安装和配置强大的领地管理插件 【免费下载链接】PlotSquared PlotSquared - Reinventing the plotworld 项目地址: https://gitcode.com/gh_mirrors/pl/PlotSquared PlotSquared 是一个功能强大的 Minecraft …...

编程新知 2026/5/19 17:01:31

告别手动水印：如何用Semi-Utils将批量照片处理时间从5小时缩短到5分钟

告别手动水印&#xff1a;如何用Semi-Utils将批量照片处理时间从5小时缩短到5分钟 【免费下载链接】semi-utils 一个批量添加相机机型和拍摄参数的工具&#xff0c;后续「可能」添加其他功能。 项目地址: https://gitcode.com/gh_mirrors/se/semi-utils 还在为数百张照片…...

编程新知 2026/5/19 16:26:34

我用豆包写的论文 AI 率为什么 95%？这款工具一次降到 4% 万方检测合格

我用豆包写的论文 AI 率为什么 95%&#xff1f;这款工具一次降到 4% 万方检测合格 去年我用豆包写了 1 万字的生物学本科论文——自己读着挺顺、像人写的。送学校万方 AIGC 检测——AI 率 95.7%&#xff0c;学校卡的是 30%。我整个人懵了。 这篇文章我把当时的实测过程写下来—…...

编程新知 2026/5/19 14:56:56

GEO优化实战指南：中小企业如何精准提升本地服务获客效率？

随着线上营销的重要性日益凸显&#xff0c;中小企业面临着前所未有的机遇与挑战。GEO&#xff08;生成式引擎优化&#xff09;作为近年来兴起的一种技术手段&#xff0c;旨在帮助企业更高效地利用AI平台进行品牌推广与客户获取。本文将探讨中小企业如何通过GEO优化策略&#xf…...

编程新知 2026/5/19 14:16:39

Perplexity接入知网文献搜索的5大避坑指南：实测发现92%研究者正在浪费87%检索时间

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Perplexity接入知网文献搜索的底层逻辑与认知重构 Perplexity 作为基于大语言模型的实时问答引擎&#xff0c;其核心能力并非仅依赖于内部参数化知识&#xff0c;而是通过动态检索增强生成&#xff08;…...

编程新知 2026/5/19 13:00:29