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

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

news 2026/4/4 11:46:02

当前内容所在位置

  • 第一章 层叠、优先级与继承
  • 第二章 相对单位
    • 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

ComfyUI视频工作流解决方案：从图像序列到专业视频输出的完整指南

ComfyUI视频工作流解决方案&#xff1a;从图像序列到专业视频输出的完整指南 【免费下载链接】ComfyUI-VideoHelperSuite Nodes related to video workflows 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-VideoHelperSuite 还在为ComfyUI中复杂的视频处理流程而…...

编程新知 2026/4/4 10:45:34

CodeHike终极指南：10个提升代码演示质量的专业技巧

CodeHike终极指南&#xff1a;10个提升代码演示质量的专业技巧 【免费下载链接】codehike Build rich content websites with Markdown and React 项目地址: https://gitcode.com/gh_mirrors/co/codehike CodeHike是一个强大的工具&#xff0c;它允许开发者使用Markdown…...

编程新知 2026/4/4 9:31:03

intv_ai_mk11惊艳输出展示：中文一句话介绍、机器学习解释等基准测试

intv_ai_mk11惊艳输出展示&#xff1a;中文一句话介绍、机器学习解释等基准测试 1. 模型效果惊艳展示 intv_ai_mk11作为一款基于Llama架构的中等规模文本生成模型&#xff0c;在实际使用中展现出令人印象深刻的能力。让我们通过几个典型场景&#xff0c;直观感受它的生成效果…...

编程新知 2026/4/4 9:20:52

Karpathy新玩法：AI搭建个人知识库，改写大模型记忆逻辑

【导语&#xff1a;Karpathy推出用AI搭建个人知识库的新玩法&#xff0c;该知识库能自我更新、越用越聪明。其搭建教程涵盖导入数据、前端查看、实际运用等步骤&#xff0c;还转变了大模型记忆逻辑&#xff0c;影响深远。】AI知识库&#xff1a;从“存储工具”到“运行系统”传…...

编程新知 2026/4/4 9:10:49

DAMO-YOLO多模态实践：视觉+文本联合分析系统

DAMO-YOLO多模态实践&#xff1a;视觉文本联合分析系统 你有没有遇到过这样的情况&#xff1f;一个智能摄像头能认出画面里是“一辆车”&#xff0c;但它不知道这是“一辆正在送货的快递车”。或者&#xff0c;一个内容审核系统能识别出图片里有“文字”&#xff0c;却无法判断…...

编程新知 2026/4/4 7:11:49

Rplidar 报错 RESULT_OPERATION_TIMEOUT 排查指南：从波特率到硬件自检的完整流程

1. 遇到RESULT_OPERATION_TIMEOUT报错时的心态调整 第一次看到Rplidar弹出"Error, operation time out. RESULT_OPERATION_TIMEOUT!"的时候&#xff0c;我也是一头雾水。这种报错就像突然断电的电脑——你不知道是电源线松了还是主板烧了。但根据我处理过上百次这类问…...

编程新知 2026/4/4 7:09:49

Mac开发者必备：OpenClaw+Qwen3.5-9B自动化测试流水线

Mac开发者必备&#xff1a;OpenClawQwen3.5-9B自动化测试流水线 1. 为什么开发者需要本地化CI/CD工具 作为一名长期在Mac上开发的全栈工程师&#xff0c;我一直在寻找一种轻量级的自动化测试方案。传统的Jenkins或GitHub Actions虽然强大&#xff0c;但对于个人项目和小团队来…...

编程新知 2026/4/4 6:39:44

Qwen3-ASR性能优化：基于CNN的语音特征提取技术

Qwen3-ASR性能优化&#xff1a;基于CNN的语音特征提取技术 语音识别技术发展到今天&#xff0c;已经不再是实验室里的新奇玩具&#xff0c;而是我们日常生活中随处可见的实用工具。从手机语音助手到会议记录软件&#xff0c;从智能家居控制到车载语音交互&#xff0c;语音识别…...

编程新知 2026/4/4 6:05:29

OpenClaw性能调优：Qwen3-14B镜像任务吞吐量提升300%实战

OpenClaw性能调优&#xff1a;Qwen3-14B镜像任务吞吐量提升300%实战 1. 问题背景与挑战 去年在尝试用OpenClaw对接本地部署的Qwen3-14B模型时&#xff0c;我发现一个尴尬的现象&#xff1a;当处理批量文件整理任务时&#xff0c;系统平均响应时间会从单任务的3秒暴增到20秒以…...

编程新知 2026/4/4 5:57:14

OpenClaw自动化报告：Qwen3-32B生成周报与数据可视化的整合

OpenClaw自动化报告&#xff1a;Qwen3-32B生成周报与数据可视化的整合 1. 为什么需要自动化周报系统 每周五下午3点&#xff0c;我的日历总会准时弹出提醒&#xff1a;"该写周报了"。这个看似简单的任务却总让我头疼——需要从Jira抓取任务进度、从GitHub收集代码提…...

编程新知 2026/4/4 5:45:08