CSS的常用单位及用法小结
1.绝对长度单位
绝对长度单位是一个固定的值，可以反映真实的物理尺寸。在CSS中，最常用的绝对长度单位是像素（px），其他绝对长度单位还包括毫米（mm）、厘米（cm）、英寸（in）、点（pt）、派卡（pc）等。
这些绝对长度单位之间的换算规则为：1in = 25.4mm = 2.54cm = 6pc = 72pt = 96px。
2.em
em是最常用的相对长度单位，1em等于当前元素的字号大小。下面的代码将div元素的字号设置为16px，内边距设置为1em，因此内边距实际上等于16px。
<div class="padded">
2021年4月23日，中国人民解放军海军长征18号艇、大连舰、海南舰在海南三亚某军港集中交接入列。
</div>.padded {
font-size: 16px;
padding: 1em;
}em适合作为那些与字号紧密相关的属性的单位，例如height、width、border-radius等，当元素的字号发生改变时，这些属性也会随着字号均匀地改变。下面的代码创建了一大一小两个不同的盒子，两个盒子对应元素的内边距和圆角长度均为1em，但由于元素的字号大小不同，因此内边距和圆角的实际长度会随着字号的变化而变化。
<span class="box smallBox">
small
</span>
<span class="box largeBox">
large
</span>.box {
border-radius: 1em;
background-color: lightgray;
padding: 1em;
}
.smallBox {
font-size: 12px;
}
.largeBox {
font-size: 18px;
}
有时我们也可以将em作为元素字号的单位，此时元素字号的大小是根据其继承的字号计算的。在下面的代码中，第一行文字按照body元素的字号渲染，第二行文字所在的元素继承了body元素的字号，我们可以在样式中为这两行文字设置不同的字号大小。第二行文字所在元素的字号大小为1.2em，其实际值是根据继承的字号计算的，即1.6 * 12px = 19.2px。
<body>
hello world
<p class="large">hello world</p>
</body>body {
font-size: 16px;
}
.large {
font-size: 1.2em;
}
使用em作为单位时还有一些很微妙的坑。em可以作为同一个元素的字号和其他属性的单位。在这种情况下，浏览器会先计算出字号，然后再用字号的值去计算其他属性的值。下面的代码对之前的例子稍加改动，为第二行文字所在元素添加了内边距。
<body>
hello world
<p class="large">hello world</p>
</body>body {
font-size: 16px;
}
.large {
font-size: 1.2em;
padding: 1.2em;
}
从结果可以看出，<p>元素的内边距等于16 * 1.2 * 1.2 = 23.04px。
3.rem
rem即root em的简称。<html>元素可以被看成dom的根节点（根元素），根节点是其他所有节点的祖先节点，我们可以通过伪类选择器:root选中<html>元素。rem的作用就是设置<html>元素的字号，在html文档中的任何位置，rem都会被浏览器计算为相同的值。下面的代码创建了一个嵌套列表，每个列表的字号等于0.8rem，而根元素的字号大小被设置为16px，因此每个列表的字号都等于0.8 * 16 = 12.8px。
<ul>
<li>Top level
<ul>
<li>Second level</li>
</ul>
</li>
</ul>:root {
font-size: 16px;
}
ul {
font-size: .8rem;
}4.视口的相对单位
视口是浏览器窗口里网页可见部分组成的区域。视口不包括浏览器的地址栏、工具栏、状态栏。常用的视口单位包括：1.vh：视口高度的1/100。2.vw：视口宽度的1/100。3.vmin：视口高度与宽度中较小者的1/100。4.vmax：视口高度与宽度中较大者的1/100。视口的相对单位的实际值是相对于视口的变化而变化的，例如vmin的实际值取决于视口高度与宽度中的较小者，当保持手机为竖屏方向时，vmin取决于手机的宽度；当保持手机为横屏方向时，vmin取决于手机的高度。下面的代码创建了一个蓝色正方形，其边长为90vmin，无论浏览器如何缩放，这个正方形都可以被正常显示。
<div class="square"></div>.square {
width: 90vmin;
height: 90vmin;
background-color: blue;
}5.calc()函数
calc()函数可以对两个及以上的值进行加减乘除运算，这些值的单位可以不同。下面的代码通过calc()函数设置根元素的字号大小，确保网页的字体会随着浏览器窗口的缩放而平滑地缩放。
:root {
font-size: calc(8px + 1vw);
}6.无单位的值
有时我们需要使用无单位的值设置某些属性，例如line-height。下面的代码将父元素<body>的line-height属性设置为1.2em，其实际值为16px * 12 = 19.2px（16px是浏览器的默认字号），子元素<p>继承了父元素的line-height属性。子元素的字号大小为2em，即2 * 16px = 32px（16px为父元素的字号大小）。由于子元素的字号大小大于行高，因此出现了文字重叠的现象。
<body>
<p>本次结果公布全国人口共计141178万人，与2010年第六次人口普查相比，
增加了7206万人，增长了5.38%，而中国人口约占全球18%，仍是世界第一人口大国。</p>
</body>body {
line-height: 1.2em;
}
p {
font-size: 2em;
}
为了解决此类问题，我们需要用无单位的值设置<body>元素的line-height属性，使得子元素继承的line-height属性的值可以根据其字号大小的变化而变化。修改代码之后，<p>元素的line-height属性的实际值等于1.2 * 2 * 16px = 38.4px。
body {
line-height: 1.2;
}
p {
font-size: 2em;
}
从上面的例子可以看出，在使用无单位的值设置父元素的属性时，浏览器会为继承该属性的子元素重新计算实际的属性值。
7.百分比
