时间戳

首页 > 解决方案 > 如何计算我的代码中的盒子大小？

html - 如何计算我的代码中的盒子大小？

问题描述

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

如您所见，有一些溢出

标签： htmlcss

解决方案

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

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

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

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

推荐阅读