摘要：无单位数字和行高有一些属性可以接收不带单位的数值意思就是一个不带长度单位的数字，如和等于，等于，如此类推。警告不带单位的只可以表示长度单位和百分比的值，譬如和。段落继承了的行高。长度有两种类型绝对的和相对的。
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对relative units的讲解和举例可以说相当全面，看完之后发现自己并不太懂CSS相对单位，也希望分享给大家，所以有了这个译文系列。（若有勘误或翻译建议，欢迎 Github PR ^_^）
《别说你懂CSS相对单位》系列译文：
如何更愉快地使用em
如何更愉快地使用rem
视口相关单位的应用
无单位数字和行高 [本文]
CSS自定义属性
本文对应的章节目录：
2.5 不带单位的数字（unitless number）和行高（line-height）
译者说：本节的内容比较短，但是内容相对独立，故没有跟其他小节合并。2.5 无单位数字（unitless number）和行高（line-height）
有一些属性可以接收不带单位的数值（意思就是一个不带长度单位的数字），如line-height、z-index和font-weight（700等于bold，400等于normal，如此类推）。你也可以在需要长度单位的地方（如px、em、rem）使用一个不带单位的0，因为长度已经是0了，带不带单位也无所谓了 —— 0px 等于 0% 等于 0em。
警告不带单位的0只可以表示长度单位和百分比的值，譬如padding、border和width。而对于一些特殊的情况，如度数（degrees）或者像秒这样基于时间的值（time-based values），是不可以使用不带单位的0的。
line-height属性最特别的地方，在于同时支持带单位和不带单位的值。你应该保持使用不带单位的数值，因为这样就可以从父元素继承。我们在页面上写点文字，看看它是怎么表现的吧。把下面代码添加到你的样式表。
[ 代码片段 2.20 继承line-height的模板 ]
We have built partnerships with small farms around the world to hand-select beans at the peak of season. We then carefully roast in small batches to maximize their potential.
给body声明一个line-height，然后文档的其他元素会从这里继承。页面的展示符合预期，不管你对页面的其他元素的字号大小做了什么改变。
[ 图 2.11 不带单位的行高，会在每个后代元素下重新计算出实际值 ]
把代码片段2.21的内容添加到你的样式表。段落（
）继承了1.2的行高。因为字号是32px（2em 16px，浏览器默认字号大小），所以本地的行高计算值是38.4px（32px 1.2）。这会给段落的行间距留下比较合适的空间。
[ 代码片段 2.21 对line-height使用不带单位的值 ]
body {
line-height: 1.2; 1
}
.about-us {
font-size: 2em;
}
1 后代元素继承不带单位的值
如果你给行高设定了一个带单位的值，你可能会得到意想不到的结果，如图2.12那样，行间文字互相重叠了，代码片段2.22则是造成这个结果的CSS代码。
[ 图 2.12 继承行高造成的行间互叠 ]
[ 代码片段 2.22 带单位的行高值造成意外的结果 ]
body {
line-height: 1.2em; 1
}
.about-us {
font-size: 2em; 2
}
1 后代元素继承了计算值（19.2px）
2 等于32px
这样的结果源于一次奇怪的继承：当一个元素是用带单位的值声明的，那么它的后代元素会继承计算结果值。当行高属性是用类似em来声明时，它的值会先被计算，然后计算后的值会传到任何继承它的后代元素。对于line-height这个属性来说，如果子元素有跟父元素不一样字号大小的情况，就会导致意想不到的结果，譬如文字间的遮挡。
长度 —— CSS中用来描述距离测量的正式用语。它是一个带单位的数字，如5px。长度有两种类型：绝对的和相对的。百分比跟长度很类似，但严格来说，百分比不能叫长度。
当你（对某个属性）使用不带单位的数字，声明的值会被继承，也就是说这个值会在子元素中用来重新计算子元素域下的值，而这个通常是你想要的效果。使用不带单位的数字，可以让你在body上设定一个行高，然后什么都不用管，页面上其他元素会默认继承，除非在某个特定的地方你想要做一个额外的样式。
（未完待续，还有最后一篇《CSS Variables》）
《别说你懂CSS相对单位》系列译文：
如何更愉快地使用em
如何更愉快地使用rem
视口相关单位的应用
无单位数字和行高 [本文]
CSS自定义属性
章节：
2.1 相对单位值的魔力
2.1.1 完美像素设计（pixel-perfect design）的挣扎
2.1.2 完美像素网页的终结
像素（pixel）、点（point）和pc（pica）
2.2 em和rem
2.2.1 对font-size使用em
当我们在一个元素内用em同时声明font-size和其他属性
字号收缩问题
2.2.2 对font-size使用rem
可用性：对font-size使用相对长度单位
2.3 停止使用像素思维去思考
2.3.1 设置一个合理的字号默认值
2.3.2 让这个面板变得“响应式”
2.3.3 调整单个组件的大小
2.4 视口相关单位（viewport-relative units）
CSS3
2.4.1 在font-size上使用vw
2.4.2 在font-size上使用calc()
2.5 不带单位的数字（unitless number）和行高（line-height）
2.6 自定义属性（也叫“CSS变量”）
2.6.1 动态改变自定义属性的值
2.6.2 通过JavaScript改变自定义属性的值
2.6.3 初探自定义属性
总结
原著版权信息：作者：Keith J.Grant
书籍：CSS in Depth
章节：Working with relative units
笔者 @Yuying Wu，前端爱好者 / 鼓励师 / 新西兰打工度假 / 铲屎官。目前就职于某大型电商的B2B前端团队。
感谢你读到这里，对上文若有任何疑问或建议，欢迎留言。
如果你和我一样喜欢前端，喜欢捣腾独立博客或者前沿技术，或者有什么职业疑问，欢迎关注我以及各种交流哈。
独立博客：wuyuying.com
知乎ID：@Yuying Wu
Github：Yuying Wu
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113524.html
摘要：还有视口相关单位，依赖浏览器的视口大小来定义长度的。如果你不熟悉视口相关单位的话，在这里简单介绍一下。笔记视口相关单位对于大多数浏览器还是一项比较新的特性，所以当你试图把这个特性和其他样式混搭时，有可能会有一些很奇怪的。 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with relative units》，书中对rel...
摘要：前段时间试译了的好书，其中的第二章，书中对的讲解和举例可以说相当全面，看完之后发现自己并不太懂相对单位，也希望分享给大家，所以有了这个译文系列。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《Working with r...
摘要：值得注意的是，这个设置对使用或其他绝对单位定义的字号大小无效。事实上，提供了一个在和间的相对单位折中解决方案，而且更易于使用。图使用相对单位和继承字号的面板下面是模板，加到你的页面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其...
摘要：相对单位的值会根据外部影响因素的变化而变化。很自然，相对单位使用起来会比较困难。在本章中，我将揭开相对单位的神秘面纱。重点来了，使用相对单位声明的值会由浏览器转化为一个绝对值，我们称之为计算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》，其中的第二章《W...
摘要：理解字体和文本属性，对于创造出专业水准的网页排版非常重要。为字体和文本分别定义了属性。字体属性主要描述了一类字体的大小和外观。还有一种新增的单位字体样式值示例说明和都表示斜体英文中的斜体主要表示强调。字体粗细可能的值，或者和。 理解字体和文本属性，对于创造出专业水准的网页排版非常重要。一个网站的品质如何，有时候只要看看它用的字体就能一目了然。 1.网页中字体的来源 用户机...
阅读 3610·2021-11-11 11:02
阅读 3304·2021-10-11 10:57
阅读 3388·2021-09-22 16:00
阅读 1703·2021-09-02 15:15
阅读 1111·2019-08-30 15:56
阅读 838·2019-08-30 15:54
阅读 2499·2019-08-30 12:43
阅读 3417·2019-08-29 16:06
