Html 如何在我的代码中计算长方体大小？_Html_Css

Html 如何在我的代码中计算长方体大小？

html css

Html 如何在我的代码中计算长方体大小？,html,css,Html,Css,我正在试验html/css并试图学习它们。但是我有一个关于计算盒子尺寸的小问题我试着理解他们使用px作为一个单位，每件事加起来，但当我切换到vh，大众，一些不寻常的事情发生了，我不知道为什么如果你能解释一下发生了什么事，我将不胜感激多谢各位 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css"

我正在试验html/css并试图学习它们。但是我有一个关于计算盒子尺寸的小问题

我试着理解他们使用px作为一个单位，每件事加起来，但当我切换到vh，大众，一些不寻常的事情发生了，我不知道为什么

如果你能解释一下发生了什么事，我将不胜感激

多谢各位

<!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>

VH/VW是窗口尺寸的百分比，在创建响应性设计时最好使用它，因为它可以节省您为较小屏幕调整像素值的时间

vh=窗户高度的百分比。因此，80vh=屏幕总高度的80%

vw=窗口宽度的百分比。因此，80vw=屏幕总宽度的80%

%=父容器的百分比。因此身高：50%；将是家长身高的50%

您需要更具体一些，到底发生了什么奇怪的事情？\n请先阅读，然后编辑您的问题以包括适当的问题描述—“一些不寻常的事情”不是一个。很抱歉，我添加了图像，但没有上传。谢谢。但是如果你只看这张图片，你就会明白我想说的更清楚。这张图片是指两个div之间的空间吗？将边距设置为0，应将其删除

body {
    background-color: red;
}

.bir {
    background-color: pink;
    height: 20vh;
    font-size: 10vh;
}

.bir h1 {
    background-color: grey;
    padding: 5vh 0;
    width: 100vw;
}