什么网站做软文,长沙有什么好玩的游乐场,甘肃交通工程建设监理公司网站,wordpress 母婴类模板当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力 2.1.1 响应式设计的兴起 2.2 em 与 rem ✔️ 2.2.1 使用 em 定义字号 ✔️2.2.2 使用 rem 设置字号 2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 2.… 当前内容所在位置 第一章 层叠、优先级与继承第二章 相对单位 2.1 相对单位的威力 2.1.1 响应式设计的兴起 2.2 em 与 rem ✔️ 2.2.1 使用 em 定义字号 ✔️2.2.2 使用 rem 设置字号 2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 2.2 em 与 rem
em 是最常见的相对长度单位也是排版中用于设置字体大小即字号的度量单位。在 CSS 中1em 表示当前元素的字号具体大小取决于作用的元素。图 2.1 为一个内边距 padding 为 1em 的 div 元素
图 2.1 1em 内边距等同于当前字号虚线用于展示内边距大小)
其样式代码如代码清单 2.1 所示。规则集指定字号为 16px即该元素在本地定义的 1em 的实际大小。随后又用 em 设置了其内边距。将代码清单 2.1 中的样式拷到一个新样式表并在元素 div classpadded 中放一些文字看看最终效果。
代码清单 2.1 对 padding 使用相对单位 em
.padded {font-size: 16px;padding: 1em; /* Sets padding on all sides equal to font-size */
}可以看到 padding 的值为 1em再乘以字号则渲染出了大小为 16px 的内边距。重点来了浏览器根据相对单位声明的值计算出的绝对单位值称为 计算值computed value
若将本例中的 padding 改为 1.5em则计算值变为 24px如果另一个选择器也指向该元素并设置了不同的字号则会修改本地 em 的大小算出的 padding 值也会随之更新。
使用 em 来设置 padding、height、width 及 border-radius 会非常方便因为当元素继承了不同的字号或者用户变更了字体设置这些样式也会跟随当前元素均匀地缩放。
图 2.2 展示了两个不同大小的盒子它们的字号、内边距及圆角半径都各不相同
图 2.2 设置了相对大小的内边距和圆角半径会随字号的改变而同步缩放
为上述盒子定义样式时可以用 em 指定其内边距及圆角半径比如设为 1em此时修改各元素的字号这些属性就会随着字体一起缩放。
按以下代码更新 HTML 示例文件并给元素分别添加样式类 box-small、box-large作为尺寸修饰符
span classbox box-smallSmall/span
span classbox box-largeLarge/span接着按照代码清单 2.2 所示添加样式。该样式以 em 为单位定义了一个 box 类同时还指定了上述一大一小两个修饰符利用不同的字号大小缩放各自所在的元素。
代码清单 2.2 将 em 应用到不同元素
.box {padding: 1em;border-radius: 1em;background-color: lightgray;
}.box-small {font-size: 12px; /* 与 L12 不同的字号该字号定义了当前元素的 em 大小 */
}.box-large {font-size: 18px; /* 与 L8 不同的字号该字号定义了当前元素的 em 大小 */
}这就是 em 的强大之处定义某个元素的大小后只需一句变更字号的样式声明就能缩放整个元素。稍后会再举一例在此之前先聊聊 em 和字号设置相关的话题。
2.2.1 使用 em 定义字号
当 em 作用于 font-size 属性property时其表现略有不同。之前讲到当前元素字号决定了 em 的大小但如果声明 font-size: 1.2em 会怎样呢一个字号肯定不能等于自身的 1.2 倍事实上font-size 属性上的 em 的大小是基于它继承的字号计算出来的。
举个简单的例子。如图 2.3 所示有两段字号各异的文字样式按代码清单 2.3 所示用 em 进行设置。 图 2.3 使用 em 定义两种不同的字号
按以下代码更新页面。第一行文本在 body 标签内则会按 body 的字号进行渲染带 slogan 样式类那行则会继承该字号来渲染
bodyWe love coffeep classsloganWe love coffee/p !-- slogan 继承了 body 的字号 --
/body代码清单 2.3 中的样式指定了 body 的字号为便于演示这里用像素作单位。接着使用 em 来增大 slogan 的字体大小。
代码清单 2.3 使用 em 定义 font-size
body {font-size: 16px;
}
.slogan {font-size: 1.2em; /* 经计算字号为该元素继承字号的 1.2 倍 */
}此时 slogan 的字号为 1.2em。要拿到计算出的像素值需要参考继承来的大小为 16px 的字体。由于 16 × 1.2 19.2所以算出的实际字体大小为 19.2px。 提示 如果已知字号的像素值但是想声明为 em 的形式则用这个简单公式换算目标像素值 ÷ 父元素继承字号的像素值。比如目标字号为 10px该元素继承的字号为 12px转成 em 则为 10 / 12 0.8333em目标字号 16px、父级字号 12px转成 em 则为 16 / 12 1.3333em。本章还会进行几次类似的计算。 大多数浏览器的默认字号均为 16px记住这些知识将大有好处。用专业的话来讲关键字 medium 的值经计算为 16px 大小。
1 em 同时用于字号和其他属性
至此我们已经用 em 定义了字号基于继承的字号并且通过 em 定义了其他属性比如 padding 和 border-radius基于当前元素的字号。当使用 em 给同一个元素同时设置字号和其他属性时情况就变得复杂多了。此时浏览器必须先计算字号然后再利用算出的结果进一步算出其余属性的具体取值。这两类属性的声明值可能相同但计算值却未必相等。
前面的示例中带有 slogan 样式类的元素最终字号为 19.2px继承字号 16px × 1.2em。如图 2.4 所示元素还是 slogan 不变只是内边距 padding 调大到 1.2em。背景设为灰色以便观察内边距的实际效果。可以看到内边距比字号还要偏大一些尽管二者的声明值都相同。
图 2.4 em 定义的字号有别于同样用 em 定义的内边距
这是因为段落标签从 body 元素继承了 16px 的字号实际字号变为了 19.2px。此时 19.2px 即为该段落元素 1em 的最终大小padding 的具体大小也是基于这个值进行计算的。相应的 CSS 代码如下所示更新到示例页查看最终效果
代码清单 2.4 使用 em 定义 font-size 和 padding
body {font-size: 16px;
}
.slogan {font-size: 1.2em; /* 计算值为 19.2px */padding: 1.2em; /* 计算值为 23.04px */background-color: #ccc;
}本例中padding 的声明值为 1.2em乘以 19.2px当前元素字号得到计算值 23.04px。尽管 font-size 和 padding 的声明值相同但计算值却不相等。
2 字体缩小的问题
当 em 用于设置具有多级嵌套结构的元素字体时也会产生意想不到的结果。为了算出每个元素的具体大小就得知道它们继承的字号是多少如果父元素碰巧也是用 em 来定义的就要看该父元素的继承值是多少以此类推一直沿着 DOM 树向上考察。
当使用 em 给列表元素定义字号、列表又嵌套了多级子列表时问题很快就显现出来了。几乎每一位 Web 开发人员在职业生涯的某个阶段加载这样的页面都会碰到类似图 2.5 所示的情况。文字在逐级缩小正是这样的问题让广大开发人员对 em 敬而远之。
图 2.5 字号设为 0.8em 导致嵌套列表中的文字逐级缩小
当列表又嵌套了多级子列表、并且给列表逐级设置基于 em 的相对字号时就会发生文字缩小的现象译注其值须小于 1 才会缩小大于 1 则为逐级放大。如代码清单 2.5 所示将无序列表的字号设为 0.8em 后由于该选择器会对页面上每一个 ul 元素生效从而让内层元素逐级继承外层元素的 em 字号字体的坍缩幅度也随之逐级叠加。
代码清单 2.5 使用 em 指定无序列表的字号
body {font-size: 16px;
}
ul {font-size: 0.8em;
}若将上述样式应用到代码清单 2.6 所示的 HTML 中就会出问题。每一个 ul 都从父列表继承字号这些 em 值只会让字体逐渐缩小
代码清单 2.6 嵌套列表 HTML
ulliTop levelul !-- 该列表嵌套在第一个列表中继承第一个列表的字号 --liSecond levelul !-- 该列表嵌套在上一个列表中继承第二个列表的字号 --liThird levelul !-- 依此类推 --liFourth levelulliFifth level/li/ul/li/ul/li/ul/li/ul/li
/ul每级列表的字号都是其父列表的 0.8 倍即第一个列表的实际字号为 12.8px下一级则为 10.24px12.8px × 0.8第三级则为 8.192px依此类推。同理如果各级字号大于 1em实际字体大小会逐渐增大。而我们想要的效果是只设置最外层的字号然后让里面的字体大小保持一致如图 2.6 所示。
图 2.6 文字大小正常的嵌套列表
实现上述效果的一种解决方案如代码清单 2.7 所示。先设置一级列表的字号为 0.8em同代码清单 2.5再用第二个选择器选中除最顶层外、所有无序列表下的所有后代列表并设置字号等于其父级字号最后得到如图 2.6 所示的效果。
代码清单 2.7 更正文字缩小问题
ul {font-size: 0.8em;
}
ul ul { font-size: 1em; /* 嵌套列表的字号应与其父级字号一致 */
}问题倒是解决了尽管不是很理想——定好一个字号立马又用另一个字号去覆盖掉。如果不用提高选择器的优先级来覆盖规则就再好不过了。
至此各位也该心里有数了使用 em 稍有不慎就会变得难以驾驭。em 用在内边距、外边距以及元素尺寸上时挺省心的可一旦用到字号上省心就容易变成闹心。好在 CSS 还有一个更好的方案—— rem。
