CSS 长度单位
常用的绝对单位
px
这是我们在开发中最常用的一个单位；最常用，但是它的概念很模糊，我暂时没有想好要怎么描述它。
相对于屏幕分辨率而不是视窗大小，通常为1个点或1/72英寸；
常用的相对单位
em
这个相对单位在我面试其它同学的过程当中，经常有人回答错，其实 em 参照的并不是父元素的 font-size，而是参照的当前元素的 font-size; 然而当前元素没有设置 font-size 的时候，当前元素的 font-size 会继承自父元素的 font-size 值，所以会造成一种 em 是参照了父元素的 font-size 的错觉。
在 MDN 中也有明确说明 font-size 属性是一个继承属性。
关于 CSS 属性继承相关的内容可以阅读 CSS-继承 这篇文章。
<div class="parent"> <div class="son"></div> </div>
复制代码案例一
.parent {
font-size: 20px;
}
.son {
// 当前 font-size 没有设置则会继承祖先元素的 font-size
// 则 2em = 2 * 20px = 40px
text-indent: 2em;
}
复制代码案例二
.son {
font-size: 30px;
// 当前 font-size 有设置值则使用当前元素的 font-size 进行计算
// 则 2em = 2 * 30px = 60px
text-indent: 2em;
}
复制代码rem
rem 是根 em（root em）的缩写，在 CSS 当中"根元素"通常指的就是 html 标签； rem 作用于"非根元素(除 html 标签外的其它标签)"时，计算值是参照于"根元素"字体大小；rem 作用于"根元素"字体大小时，相对于其出初始字体大小。
rem 最常见的用法就是用在移动端适配当中。
html {
font-size: 2rem; // Chrome 中 html 初始字号大小是 16px, 所以这里 2rem = 32px
}
复制代码html {
font-size: 100px;
}
p {
font-size: 0.5rem; // 100px * 0.5 = 50px
line-height: 0.75rem; // 100px * 0.75 = 75px
}
复制代码百分比
以百分比为长度单位的可以分为三类：
- 在 font-size 属性中使用百分比，其中的 font-size 的值会是其父元素的 font-size 值乘以百分比。
- 要计算 height, top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto。
- 要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。
上文中描述的包含块的含义可以阅读这里：MDN 包含块
百分比单位相关的详情内容可以阅读这里：MDN 百分比单位
<div class="parent"> <div class="son"></div> </div>
复制代码.parent {
width: 100px;
height: 88px;
font-size: 20px;
background: #eee;
}
.son {
font-size: 200%; // 相对于父元素的 font-size, 即 20px * 200% = 40px
width: 30%; // 相对于父元素的 width, 即 100px * 30% = 30px
height: 100%; // 相对于父元素的 height, 即 88px * 100% = 88px
padding: 5%; // 相对于父元素的 width, 即 100px * 5% = 5px
margin: 6%; // 相对于父元素的 width, 即 100px * 6% = 6px
position: relative;
left: 5%; // 相对于父元素的 width, 即 100px * 5% = 5px
right: 5%; // 相对于父元素的 width, 即 100px * 5% = 5px
top: 10%; // 相对于父元素的 height, 即 88px * 10% = 8.8px
bottom: 10%; // 相对于父元素的 height, 即 88px * 10% = 8.8px
}
复制代码viewport
viewport 的意思是视口，我们可以浅层次的理解为浏览器中页面的可见区域；现在也是比较主流的移动端适配方案
| 单位 | 描述 |
|---|---|
| vw | viewport width，视窗宽度，1vw = 视窗宽度的1% |
| vh | viewport height，视窗高度，1vh = 视窗高度的1% |
| vmin | vw 和 vh 中较小的那个 |
| vmax | vw 和 vh 中较大的那个 |
不常用的单位
| 单位 | 描述 |
|---|---|
| ch | 相对于0尺寸 |
| in | inch, 表英寸 |
| cm | centimeter, 表厘米 |
| mm | millimeter, 表毫米 |
| pt | 1/72英寸 |
| pc | 12点活字，或1/12点 |
| ex | 相对于小写字母"x"的高度 |
| gd | 一般用在东亚字体排版上，这个与英文并无关系 |