CSS基础回顾——相对单位

在CSS中，我们经常会使用相对单位来定义元素的大小和位置。相对单位的好处在于，它可以根据不同的设备和屏幕尺寸进行调整，从而实现响应式设计。

CSS中的相对单位主要有以下几种：

• em ：em是最常见的相对长度单位，它相对于当前元素的font-size进行计算。例如，如果当前元素的font-size是16px，那么1em就等于16px。em的优点是，它可以继承父元素的font-size，从而实现更灵活的布局。但是，em也有一个缺点，那就是它可能会受到父元素font-size的影响，导致当指定多重嵌套元素的字号时，产生意外的结果。

• rem ：rem是root em的缩写，它相对于根元素（html元素）的font-size进行计算。例如，如果根元素的font-size是16px，那么1rem就等于16px。rem的优点是，它不受父元素font-size的影响，因此可以保证在任何情况下都能得到一致的结果。

• ex ：ex是另一个相对长度单位，它相对于当前元素的x-height进行计算。x-height是指小写字母x的高度。例如，如果当前元素的x-height是10px，那么1ex就等于10px。ex的优点是，它可以根据当前元素的字体和字号进行调整，从而实现更精确的布局。但是，ex也有一个缺点，那就是它可能不是所有浏览器的支持。

• ch ：ch是character的缩写，它相对于当前元素的字符宽度进行计算。例如，如果当前元素的字符宽度是10px，那么1ch就等于10px。ch的优点是，它可以根据当前元素的字体和字号进行调整，从而实现更精确的布局。但是，ch也有一个缺点，那就是它可能不是所有浏览器的支持。

• vw ：vw是viewport width的缩写，它相对于视口的宽度进行计算。例如，如果视口的宽度是1000px，那么1vw就等于10px。vw的优点是，它可以实现响应式设计，当视口的宽度改变时，元素的大小也会随之改变。

• vh ：vh是viewport height的缩写，它相对于视口的高度进行计算。例如，如果视口的高度是1000px，那么1vh就等于10px。vh的优点是，它可以实现响应式设计，当视口的高度改变时，元素的大小也会随之改变。

• vmin ：vmin是viewport minimum的缩写，它是vw和vh中较小者的值。vmin的优点是，它可以实现响应式设计，当视口的宽度或高度改变时，元素的大小也会随之改变。

• vmax ：vmax是viewport maximum的缩写，它是vw和vh中较大者的值。vmax的优点是，它可以实现响应式设计，当视口的宽度或高度改变时，元素的大小也会随之改变。

• 百分比 ：百分比也是一种相对单位，它相对于父元素的宽度或高度进行计算。例如，如果父元素的宽度是100px，那么50%就等于50px。百分比的优点是，它可以实现响应式设计，当父元素的宽度或高度改变时，元素的大小也会随之改变。

相对单位与绝对单位

在CSS中，除了相对单位之外，还有绝对单位。绝对单位的优点是，它们不会受到父元素或视口的影响，因此可以保证在任何情况下都能得到一致的结果。

CSS中的绝对单位主要有以下几种：

• px ：px是像素的缩写，它是一个绝对长度单位。1px等于一个设备像素点的宽度。px的优点是，它可以实现精确的布局，但是它不能实现响应式设计。

• mm ：mm是毫米的缩写，它是一个绝对长度单位。1mm等于1000微米。mm的优点是，它可以实现精确的布局，但是它不能实现响应式设计。

• cm ：cm是厘米的缩写，它是一个绝对长度单位。1cm等于10毫米。cm的优点是，它可以实现精确的布局，但是它不能实现响应式设计。

• in ：in是英寸的缩写，它是一个绝对长度单位。1in等于2.54厘米。in的优点是，它可以实现精确的布局，但是它不能实现响应式设计。

• pt ：pt是点的缩写，它是一个绝对长度单位。1pt等于1/72英寸。pt的优点是，它可以实现精确的布局，但是它不能实现响应式设计。

相对单位和绝对单位各有优缺点，在实际使用中，我们需要根据不同的情况来选择合适的单位。