Question

我有一组简单的div。我一直在使用大众/大众和百分比，但是偶然发现了一个我无法理解的怪异问题。您可以在下面看到问题：

[https://codepen.io/anon/pen/qvQBgp#anon-login][1]

.big{
width: 20vw;
height: 20vh;
margin-left: auto;
margin-right: auto;
border: 1px dotted black;
margin-top: 10vh;
}

.toprow {
background-color: cyan;
display: flex;
flex-direction: row;
justify-content: space-between;
height: 20%;
}

.bottomrow {
display: flex;
flex-direction: row;
margin-top: 60%;
margin-bottom: 0px;
justify-content: space-between;
background-color: cyan;
height: 20%;
}


.left_top {
width: 20%;
height: 100%;
background-color: red;
}

.right_top {
width: 20%;
height: 100%;
background-color: green;
}

.left_bottom {
width: 20%;
height: 100%;
background-color: orange;
}

.right_bottom {
width: 20%;
height: 100%;
background-color: blue;
}

<!DOCTYPE html>
<html lang="zxx">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="tyyli2.css">
</head>
<body>
<div class="big">
<div class="toprow">
<div class="left_top">
</div>
<div class="right_top">
</div>
</div>
<div class="bottomrow">
<div class="right_bottom">
</div>
<div class="left_bottom">
</div>
</div>
</div>
</body>
</html>

我将vh / vw用于“大div”。然后，我认为定义较小div的正确方法是百分比，因为它们是大div中的子元素。如果视口大小发生更改，这将导致下一行不在大div内。 html结构正确。作为比较，如果我在vh / vw中定义 all 个单位，则可以使用。据我所知，这不是应该的，因为较小的div位于大div内部，因此应定义为大div的百分比，对吗？为什么百分比在此设置中“失败”？

请您说明一下这件事:)谢谢！顺便说一句，这看起来像是一个家庭作品（因为它太荒谬了），但事实并非如此。我在学习css / html只是为了好玩，而这是我脑子虚弱时提出的挑战：D

Answer 1

您可能认为您要在此处添加20％+ 60％+ 20％，结果应为100％-但是，这60％的计算基数与开始时的20％相同。

保证金的百分比值始终参考包含块的 width －即使对于margin-top和-bottom也是如此。

height:20%表示父块高度的20％-margin-top:60%表示包含块的宽度的60％。

CSS：百分比和vh / vw在一起，结果很奇怪

1 个答案: