路由器 做网站,推荐网站建设的电销该怎么打,实力网站开发,百度下载官方下载安装当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高 ✔️2.6 自定义属性2.7 本章小结 2.5 无单位的数值与行高
有些属性允许使用无单位的数值#xff08;unitless value… 当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高 ✔️2.6 自定义属性2.7 本章小结 2.5 无单位的数值与行高
有些属性允许使用无单位的数值unitless values即没有指定单位的数字。支持无单位值的属性properties包括 line-height、z-index 和 font-weight700 相当于 bold 粗体字400 相当于 normal 常规大小等等此外还可以在任何设置长度单位如 px、em 或 rem的地方使用无单位数值 0因为在这些情况下单位并不重要——0px、0%、0em 均等效。 警告 无单位的 0 只能用于长度值和百分比例如内边距paddings、边框borders和宽度widths0 不可用于角度值例如度或者与时间相关的值例如秒。 line-height 属性比较特殊其属性值既可以是带单位的值也可以不带单位。通常应该使用无单位的值因为二者的继承方式有所不同。让我们在页面中输入文字看看不带单位的行高是什么效果。按如下代码更新页面
代码清单 2.15 继承 line-height 的 HTML
bodyp classabout-usWe 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。由于字号为 32px2em × 16px浏览器默认值因此本地计算的行高为 38.4px32px × 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 设置行高之后就不用修改了除非个别地方需要其他不一样的行高。
