css中的vw/vh与%

css中的vw/vh与%

其他博主讲这个的多，但是我觉得没有划重点。
首先来说说vw/vh,将浏览器的宽高等分为100，浏览器视口的宽高单位。也就是说能智能的计算，包括外接显示器。可以实现元素的自适应宽高：随着浏览器视口变化而变化。

vw：若盒子的宽度设置为100vw,也就是浏览器视口宽度。

• vw重点：
  乍一看是元素撑满浏览器，但实际上pc端一般不这么做（别问为什么，坑我已经踩过了）。100vw的元素会铺满浏览器，导致浏览器出现横向滚动条，导致6px的误差（即滚动条宽度）。若是最外层元素想和视口宽度一致，建议使用width:100%。

%： 采用最近的父级元素的宽高作为100%。例如width:50%;height:50%;就是将父级元素宽度的50%设置为自己的宽度，将父级元素高度的50%设置为自己的高度。

• %重点：

1. 这个是不可以继承的！！！！也就是%计算的是直接父级，可以这样巧计：间接父级可以有很多个，直接父级最多只有一个。如下图所示：
   代码如下:

  

    

  


.testFather {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
.testPosition {
position: absolute;
width:50%;
height: 50%;
background-color: gray;
top: 0;

}

.testPosition2 {
  position: absolute;
  width: 30%;
  height: 30%;
  background-color: green;
  top: 0;
  margin-left:auto;
  margin-right: auto;
  }

2. 当在使元素位移时，%指的是元素本生，不再是直接父级。例如常用的居中手段，添加position后：left: 50%;tansform: translate(-50%);这里的50%指的就是元素自己宽的50%。

最后，希望自己的总结能让各位看官少走弯路吧！！！下期见886