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

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

news 2025/12/25 21:25:30

当前内容所在位置

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

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/12/17 21:56:00

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/12/24 22:02:15

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/12/19 4:12:14

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/12/19 16:13:46

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/12/16 21:53:05

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/12/18 13:04:01

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/12/19 16:09:28