CSS基础回顾 - 相对单位

em

em是最常见的相对长度单位， 是相对于当前元素 font-sieze的计算值。

缺点：当前元素的font-size可能是继承来的字号，可能导致当指定多重嵌套元素的字号时，产生意外的结果（不可预测）。

rem

rem 是 root em 的缩写，rem 不是相对于当前元素，而是相对于根元素的单位。 相比em，rem降低了复杂度，结合了px和em的有点，既保留了相对单位的又是，又简单易用，使之可预测。

❝

拿不准时，用rem设置字号，用px设置边框，用em设置其他大部分属性。

❞

视口的相对单位

❝

视口 — 浏览器窗口里网页可见部分的边框区域。不包括浏览器的地址栏、工具栏、状态栏。

❞

• vh：视口高度的 1 / 100
• vw：视口宽度的 1 / 100
• vmin：视口宽、高中较小的一方的 1 / 100
• vmax：视口宽、高中较大的一方的 1 / 100

无单位的数值和行高

有些属性允许无单位的值。包括： line-height、z-index、font-weight（700 等于 bold，400等于normal）。

lint-height比较特殊，它的值既可以有单位也可以无单位。它继承的方式不一样。

• 当值定义为长度（px、em、rem，等等）时，子元素会继承它的计算值。
• 当值为无单位的数值时，继承的是声明值，即在每一个继承子元素上会重新计算它的计算值。

// 当值为长度
body{
 font-size: 16px;
 line-height: 1.2em;  // 后代继承计算值  19.2px
}
.txt {
 font-size: 2em; // 计算值  32px
}

// 当值为无单位数值
body {
 font-size: 16px;
 line-height: 1.2; // 后代继承声明值
}
.txt { // 其line-height会重新计算它的计算值,为 32 * 1.2 = 38.4px
 font-size: 2m; // 计算值 32px
}

本文使用 mdnice 排版