css 总结日常工作用到的 px / % / rem / em / vh / vw 尺寸单位

在 css 中使用不同的尺寸单位会有不同的计算结果，笔者最常用的分别是

px
%
rem
em
vh
vw
接下来我会根据上面列表来一一讲解每个单位的作用，文章略长，你也可以直接跳到最下面的总结看结果，对于新手我建议你能耐心看完，相信读完后应该会有新的收获。

第一种：px

px：固定单位

px 单位很简单，写多少显示的就是多少，无论你在哪个设备看的都是一样的

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
      
      
			width: 10px;
			height: 10px;
			background: green;
			margin-bottom: 10px;
		}
		.box2{
      
      
			width: 100px;
			height: 100px;
			background: green;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box2"></div>
</body>
</html>

效果图：
在这里插入图片描述
10 px 就是 10， 100px 就是 100px ，所以这里没有什么要特别说明的。

第二种：%

% ：以父元素作为计算，根元素是 body

使用百分比 % 比第一种计算规则会有所不同，但理解起来并不复杂，我们来看例子就知道了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .box{
      
      
      width: 10%;
      height: 10%;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

效果图
在这里插入图片描述
是的，你没看错，10% 就是空白的，Nothing! 啥都没有，这是为什么呢？根据我们前面提到过的

% ：以父元素作为计算，根元素是 body

因为没有父元素，所以根元素是 body，我们来看看 body 的尺寸是多少
在这里插入图片描述
我们可以看到高度为 0 ，这下就懂了，0 * 10% 自然等于 0 ，为什么会为 0 呢，这是因为目前并没有内容呈现，所以浏览器不会给我们带上额外的高度，假如有内容呈现，则默认高度就是内容，知道问题所在那我们就给 body 手动加上 10px 高度看看有没有什么变化
在这里插入图片描述

我们可以看到了出现了一条线，因为根元素 body 设置了 10px 所以子元素就是 10% = 10% * 10px = 1px 结果是正确的，不过我们是在根元素是 body设置的 10px，明显不能让 body 干这种事嘛，所以我们要让子元素的父元素是一个 div标签而不是body，我们把代码换成下面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .big-box{
      
      
      width:  200px;
      height:  200px;
      background:  red;
    }
    .box{
      
      
      width: 10%;
      height: 10%;
      background: orange;
    }
  </style>
</head>
<body>
  <div class="big-box">
    <div class="box"></div>
  </div>
</body>
</html>

在这里插入图片描述
我们可以看到，父元素 big-box 宽高设置了 200 * 200 并以红色作为背景，而里面的那一小块橘色就是子元素box，它对应了 10% * 10% = 20 * 20，而当我们给 box 元素设置 100% * 100% 时就会撑满父元素了，如图

.box{
    
    
   width: 100%;
   height: 100%;
   background: orange;
 }

在这里插入图片描述
另外，由于 css 其它属性也会影响元素尺寸，如 padding 内间距，我们给父元素 big-box 设置 padding: 10px 看看有什么效果。

可以看到，此时子元素的 100% 并没有撑满父元素，因此新增了一个知识点
% 单位不包含父元素的 padding

类似地，css 有很多属性可以改变原有的尺寸，比如我们给子元素 box 设置 position: absolute 绝对定位（不知道绝对定位的上网搜一下，它会脱离文档流）

在这里插入图片描述
我们可以看到，此时子元素 box 撑满了整个浏览器屏幕，父元素 big-box 完全被忽略了，这是因为 postiion: absolute 是以上一个父元素的 position: relative 为单位，而当没有任何元素设置 position:realtive时就会以浏览器宽高作为单位，要想解决这个问题也很简单，给父元素设置 position: relative 来束缚它的子元素

 .big-box{
    
    
 	position: relative;
 	padding:  10px;
    width:  200px;
    height:  200px;
    background:  red;
 }

在这里插入图片描述
看起来是恢复正常了，只是有点奇怪啊，偏离了，而且宽高大小和父元素一样了， padding 看起来被计算进去了啊，是的，当子元素使用了position: absolute 绝对定位后，它的计算规则会变化，因此又新增了知识点
使用绝对定位后，% 单位会包含父元素的 padding

第三种：rem

rem：以 html 标签里的 font-size为单位，默认是 16px 所以 1rem = 16px

代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .box{
      
      
      width: 1rem;
      height: 1rem;
      background:  red;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

如图
在这里插入图片描述

假设我们把 html 的 font-size 手动设置为 50px 那么 1rem = 50px，代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    html{
      
      
      font-size: 50px;
    }
    .box{
      
      
      width: 1rem;
      height: 1rem;
      background:  red;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

如图
在这里插入图片描述

很简单对不对

第四种：em

以自身元素 > 父元素 > 根元素 html 的 font-size为单位

em 和 rem 有点类似，但它并不是以 html 为单位，而是以自身元素、父元素、根元素 html 的 font-size为单位，如果 自身元素 / 父元素 / html 同时设置 font-size ，那么它的优先级是以就近原则，即自身元素 > 父元素 > html，如什么都没设置，则以 html 默认的 16px为单位，我们来看代码就知道了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    /* 根元素 */
    html{
      
      
      font-size: 200px;
    }
    /* 父元素 */
    .father{
      
      
      font-size: 100px;
    }
    /* 自身元素 */
    .box{
      
      
      font-size: 50px;
      width: 1em;
      height: 1em;
      background:  red;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="box"></div>
  </div>
</body>
</html>

在这里插入图片描述
我们可以从效果图可以看到，取消自身元素的 font-size 后就会去继承父元素的font-size，取消父元素后就会继承 html 的 fnot-size，当 html 也取消时，则为 16px ，符合就近原则。

第五种：vh

vh：以设备高度作为单位，就是你的手机/电脑可视区域高度

假设我的手机设备高度是 667 ，那么设置了 50vw 就相当于占用 667 的 50%，设置了 10vh 就是占用 667 的 10% ，因每个设备的高度都是不一样的，属于动态玩法，目前也已经在广泛使用了，我们来看下代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .box{
      
      
      width: 50vh;
      height: 50vh;
      background:  red;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在这里插入图片描述

第六种：vw

和 vh 一样，不同的是 vw以设备宽度为单位

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .box{
      
      
      width: 50vw;
      height: 50vw;
      background:  red;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在这里插入图片描述

总结

px: 固定单位
%: 以父元素为单位（不包含 padding，有绝对定位则包含），根元素是 body
rem: 以 html 的font-size 为单位
em: 以自身元素 -> 父元素 -> 根元素 html 的 font-size为单位，优先级是就近原则
vh: 以设备高度为单位（作为自适应布局以后会逐渐流行）
vw: 以设备宽度为单位（作为自适应布局以后会逐渐流行）

好了，以上就是笔者日常用到的，希望能对你有帮助，喜欢就点个赞，欢迎有问题的小伙伴到下方评论。