[分享]css中属性值的相对单位有几种

CSS中的属性值可以使用两种不同的单位：相对单位和绝对单位。今天我们主要讨论相对单位，包括百分比、em、rem和vw/vh。1. 百分比百分比是相对于父元素的大小进行计算的单位。例如，如果我们有一个宽...

CSS中的属性值可以使用两种不同的单位：相对单位和绝对单位。今天我们主要讨论相对单位，包括百分比、em、rem和vw/vh。
1. 百分比
百分比是相对于父元素的大小进行计算的单位。例如，如果我们有一个宽度为300px的父元素，我们可以将其子元素的宽度设置为50%来让其宽度等于150px。使用百分比可以在不同屏幕尺寸和设备上实现更好的响应式布局。
示例代码：

<style>
  .parent {
    width: 300px;
    height: 300px;
    background-color: lightgray;
  }
  
  .child {
    width: 50%;
    height: 50%;
    background-color: gray;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div> 

2. em
em是相对于当前元素的字体大小进行计算的单位。例如，如果一个元素的字体大小为16px，我们可以将其宽度设置为2em来让其宽度等于32px。使用em可以实现一些有趣的效果，例如在嵌套元素中进行缩放。
示例代码：

<style>
  .outer {
    font-size: 16px;
  }
  
  .inner {
    width: 2em;
    height: 2em;
    background-color: gray;
  }
</style>
<div class="outer">
  <div class="inner"></div>
</div> 

3. rem
rem是相对于根元素的字体大小进行计算的单位。根元素通常是HTML元素。例如，如果根元素的字体大小为16px，我们可以将一个元素的宽度设置为2rem来让其宽度等于32px。使用rem可以实现响应式布局的同时，避免使用嵌套元素时产生的字体大小计算问题。
示例代码：

<style>
  html {
    font-size: 16px;
  }
  
  .container {
    width: 20rem;
    height: 10rem;
    background-color: lightgray;
  }
  
  .box {
    width: 50%;
    height: 50%;
    background-color: gray;
  }
</style>
<div class="container">
  <div class="box"></div>
</div> 

4. vw/vh
vw和vh是相对于视口的宽度和高度进行计算的单位。vw表示视口宽度的百分比，vh表示视口高度的百分比。例如，如果视口的宽度为1000px，我们可以将一个元素的宽度设置为50vw来让其宽度等于500px。使用vw/vh可以实现一些基于视口尺寸的响应式布局。
示例代码：

<style>
  .container {
    width: 100vw;
    height: 100vh;
    background-color: lightgray;
  }
  
  .box {
    width: 50vw;
    height: 50vh;
    background-color: gray;
  }
</style>
<div class="container">
  <div class="box"></div>
</div> 

综上所述，CSS中的相对单位包括百分比、em、rem和vw/vh。使用不同的相对单位可以实现更加灵活的布局效果。