我正在尝试HTML/CSS并尝试学习它们。但是我有一个关于计算盒子大小的小问题。
我试图理解他们使用px作为一个单位，所有的东西加起来，但当我切换到vh，大众，%一些不寻常的happerens，我不知道为什么。
所以，如果你能解释一下是怎么回事，我会很高兴的。
谢谢.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="bir">
<h1> Alper </h1>
</div>
</body>
</html>
body {
background-color: red;
}
.bir {
background-color: pink;
height: 20vh;
font-size: 10vh;
}
.bir h1 {
background-color: grey;
padding: 5vh 0;
width: 100vw;
}
如您所见，有一些溢出的
VH/VW是窗口尺寸的百分比，这在创建响应性设计时是最好的，因为它省去了为较小屏幕调整像素值的工作
vh=窗口高度的百分数。因此80VH=屏幕总高度的80%。
vw=窗口宽度的百分数。因此80vw=屏幕总宽度的80%。
%=父容器的百分比。因此高度：50%；将是父级高度的50%
