gpt4 book ai didi

html - 边距顶部 : 100% gets parent width value. .. 奇怪

转载 作者:太空狗 更新时间:2023-10-29 13:55:24 24 4
gpt4 key购买 nike

我在大多数浏览器(即 ff、chrome、safari)上都有非常奇怪的“问题”。这是示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html{
outline: 1px #0ff solid;
background: rgba(0,255,255,0.1);
}
body{
margin: 0;
padding: 0;
outline: 1px #00f solid;
background: rgba(0,0,255,0.1);
}
#aDiv{
width: 300px;
outline: 1px #f00 solid;
background: rgba(255,0,0,0.2);
}
#bDiv{
margin-top: 100%;
outline: 1px #0f0 solid;
background: rgba(0,255,0,0.1);
}
</style>
</head>
<body>
<div id="aDiv">
<div id="bDiv">
content
</div>
</div>
</body>
</html>

当您更改#aDiv 宽度时,#bDiv margin-top 将更改为相同的值。我不知道怎么可能,高度变为宽度。无论如何,也许你们中的一位可以向我解释发生了什么事?

最好的问候;)

D.

最佳答案

这实际上是according to the spec

<percentage> The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

很没用,对吧?您是否考虑过使用 position: absolutebottom: 0?它们可能更符合您的需求。

关于html - 边距顶部 : 100% gets parent width value. .. 奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7661635/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com