【CSS in Depth 2精译】2.5 无单位的数值与行高
当前内容所在位置
- 第一章 层叠、优先级与继承
- 第二章 相对单位
- 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.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.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 无单位的数值与行高 有些属性允许使用无单位的数值（unitless value…...
【人脸识别、Python实现】PyQt5人脸识别管理系统
PyQt5人脸识别管理系统 项目描述主要功能效果展示获取源码 项目描述 接的一个基于宿舍管理系统与人脸识别的小单子。然后我把它优化了一些，现在开源一下。有需要的小伙伴自取，点个免费的关注就行 主要功能 1、录入学生基本信息、录入人脸 2、主页面展…...
软设之观察者模式
设计模式中，观察者模式的意图是:定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。 比如说，有一个新闻网站，订阅的用户众多，假如说管理员发布了一…...
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版…...
09磁盘管理
一、磁盘管理 1.磁盘基础知识 （1）磁盘接口类型 个人电脑， 硬盘接口分为IDE类型和SATA类型 服务器版分为SCSI类型和SAS类型 （2）磁盘命名方式 windows中硬盘命名方式是c，d,e盘 linux中硬盘命名方式为 系统…...
Node.js Stream
Node.js Stream Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许开发者使用 JavaScript 编写服务器端代码。Node.js 的一个核心特性是其对流（Stream）的处理能力。流是一种在 Node.js 中处理读/写文件、网络通信或任何端到端…...
简化嵌入式Linux开发：在Ubuntu上安装和配置交叉编译环境的高效方法
在嵌入式Linux开发中，我们通常需要在Ubuntu上安装交叉编译工具链，并配置相关文件。编译过程中，如果遇到依赖库问题，还需要手动查找并编译开源源码。这些步骤较为繁琐，为了简化操作，我们可以尝试以下方案&am…...
Photoshop批量处理图片分辨率
整理一些文件的时候，发现需要处理大量图片的尺寸和分辨率。如果一张一张的处理就会很慢，搜了下，Photoshop提供自动批量处理的方法。在此记录一下。 一、说说批量处理图片 1.打开PS软件并导入图片，我用的是比较老的版本cs4&#…...
TCP协议的三次握手和四次挥手（面试）
三次握手 首先可以简单的回答： 1、第一次握手：客户端给服务器发送一个 SYN 报文。 2、第二次握手：服务器收到 SYN 报文之后，会应答一个 SYNACK 报文。 3、第三次握手：客户端收到 SYNACK 报文之后…...
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…...
springboot在线教育平台-计算机毕业设计源码68562
摘要 在数字化时代，随着信息技术的飞速发展，在线教育已成为教育领域的重要趋势。为了满足广大学习者对于灵活、高效学习方式的需求，基于Spring Boot的在线教育平台应运而生。Spring Boot以其快速开发、简便部署以及良好的可扩展性，…...
形态学图像处理
1 工具 1.1 灰度腐蚀和膨胀 当平坦结构元b的原点是(x,y)时，它在(x,y)处对图像f的灰度腐蚀定义为，图像f与b重合区域中的最小值。结构元b在位置(x,y)处对图像f的腐蚀写为： 类似地，当b的反射的原点是(x,y)时，平坦结构元…...
安泰电压放大器的选型方案是什么
电压放大器是一种常见的电路元件，广泛应用于各种电子设备中。在选择电压放大器的时候，我们需要考虑一系列因素，以确保选型方案能够满足实际需求。下面安泰电子将详细介绍电压放大器选型的主要考虑因素，包括应用需求、技术性能、成…...
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 …...
MySQL和Redis更新一致性问题
1. 先更新数据库，再更新缓存 适用场景：适用于对数据一致性要求不是特别高，且缓存更新失败对 系统影响较小的场景。例如，某些非关键数据的缓存更新。 风险：如果缓存更新失败，会导致数据库和缓存数据不一致。…...
（19）夹钳(用于送货)
文章目录 前言 1 常见的抓手参数 2 参数说明 前言 Copter 支持许多不同的抓取器，这对送货应用和落瓶很有用。 按照下面的链接（或侧边栏），根据你的设置了解配置信息。 Electro Permanent Magnet v3 (EPMv3)Electro Permanent M…...
安装lap和cython_bbox失败了很多次！！！终于被我发现了！
先说 lap 试了很多种方式，pip install lap / conda install -c conda-forge lap … 全失败了后面发现 lap 不支持 python > 3.9 的版本使用 pip install lapx 成功！ cython_bbox 更难了 一直提示缺少MicroSoft C 14.0 … 大家有需要自行下载&#x…...
异业联盟整合各大行业门店，共享资源
异业联盟系统是一种将不同行业的企业或商家整合在一起，通过资源共享、优势互补、合作推广等方式，实现共同发展和互利共赢的商业合作模式的数字化管理和运营系统。 其具有以下显著优势： 1.拓展客户群体：不同行业的企业联合起来&am…...
前端如何去看蓝湖
首先加入团队，在内容中我们可以看到点击图片，右边出现的图 包含了像素甚至有代码，我们可以参考这个代码。 那么在使用之前我们需要调整好像素，例如我们的像素宽为375，不用去管高，然后这个宽度我们可以去自…...
HTML+CSS+JS 实现3D风吹草动效果（B站视频）
效果： 代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>3D effect&…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
【磁盘】每天掌握一个Linux命令 - iostat
目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat（I/O Statistics）是Linux系统下用于监视系统输入输出设备和CPU使…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...