如何计算我的代码中的盒子大小？ [复制]答案

【问题标题】：How to calculate the box sizing in my code? [duplicate]如何计算我的代码中的盒子大小？ [复制]
【发布时间】：2019-05-10 22:19:12
【问题描述】：

我正在尝试使用 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

【问题讨论】：

您需要更具体一些，发生了什么“奇怪的事情”？\
请先阅读How to Ask，然后编辑您的问题以包含正确的问题描述——“一些不寻常的事情发生”不是一个。
很抱歉我添加了图片，但没有上传。

标签： html css

【解决方案1】：

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

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

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

% = 父容器的百分比。因此height:50%; 将是父母身高的 50%

【讨论】：

谢谢。但如果你能看一下图片，你就会明白我想说的更清楚。
图片是指div之间的空间吗？将边距设置为 0，应该去掉它