我不明白百分比的意义。
在此站点中：https : //developer.mozilla.org/en-US/docs/Web/CSS/top#Summary
它说：“指的是容纳块的高度”
但是，“包含块”是什么意思？
我尝试了一些代码，但仍然不明白。
假设我们有以下代码：
<div class="block1">
<p>This will be my blog I will use</p>
</div>
和在CSS
.block1{
top=50%; <!--now if we use this "%" Where to get reference?-->
height:100px;
}
我认为这可能是对html大小的引用。
如果更改它，我的上边缘会自动更改，因为我更改了参考高度，但html却没有！（也许我无法更改它）
那么，百分比（％）从何处获得其参考值？
首先，您的CSS代码是错误的。
top=50%;
应该
top: 50%;
HTML文档的结构通常如下：
<!DOCTYPE html>
<head></head>
<body>
<div class="block1"></div>
</body>
</html>
因此，由于元素被.block1放置在内部<body></body>，因此<body></body>成为“包含块”，因为元素默认情况下被视为块（display:block);
但效果top: 50%取决于其他的一些东西，比如财产position:，其价值absolute/relative/fixed/etc;的.block1。
absolute 会将元素与其他所有元素独立放置，只有一个例外，我将在下面讨论。
relative会将元素相对于所有其他元素放置，这也是默认情况下为display: block和position: relative，这意味着您是否拥有如下所示的HTML文档：
<!DOCTYPE html>
<head></head>
<body>
<div class="block1" class="block"></div>
<div id="b2" class="block"></div>
<div id="b3" class="block"></div>
</body>
</html>
.block {
width: 100px;
}
然后它将显示如下文档：
____________________top of page___________________________
| [[.block1]]----displayed as block, takes up whole row---|
| [[#b2 ]]----displayed as block, takes up whole row---|
| [[#b3 ]]----displayed as block, takes up whole row---|
| next element would be added here |
| and then here |
| and then below again |
| |
| |
| |
| |
该文档的行为有点像颠倒的俄罗斯方块。每个具有默认设置的元素都位于页面顶部，然后随着添加的元素越来越多，向下移动/堆叠。由于默认情况下元素为display: block，因此这意味着一个元素将占据包含元素的整个宽度，即使只是宽度的一半，因此下一个元素也将位于其下方。
此外，如果父元素的position设置为relative，子元素的设置为，则子元素将相对于父元素absolute定位。因此，如果孩子有position: absolute; top: 50%;，它将不会独立地定位自己，而是50%从父元素的顶部定位。
_____________________0% of document/body_______
| |
| |
| |
| ____parent - 0%_____ |
| | | |
| | | |
| | ___________ | |
| | | | | |
| | |child - 50%| | |
| | |___________| | |
| | | |
| | | |
| |_______100%_________| |
| |
| |
| |
| |
|_____100% of document/body_____________________|
我希望这是有道理的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句