这个问题在这里已经有了答案:
CSS Units - What is the difference between vh/vw and %?
(7 个回答)
2年前关闭。
我正在尝试使用 html/css 并尝试学习它们。但我有一个关于计算盒子尺寸的小问题。
我试图以 px 为单位来理解它们，并且每一项都加起来，但是当我切换到 vh、vw、% 时，一些不寻常的事情发生了，我不知道为什么。
因此，如果您能向我解释发生了什么，我将非常感激。
谢谢你。
<!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;
}
As you can see there is some overflow of the
最佳答案
VH/VW 是窗口尺寸的百分比，最好在创建响应式设计时使用，因为它可以节省您为较小屏幕调整像素值的时间
vh = 窗口高度的百分比。因此80vh = 屏幕总高度的 80%。
vw = 窗口宽度的百分比。因此80vw = 屏幕总宽度的 80%。
% = 父容器的百分比。因此height:50%;将是 parent 高度的 50%
关于html - 如何计算我的代码中的盒子大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56079362/