Css 与带有百分比值的页边距顶部对齐混淆
我一直在尝试用百分比来处理CSS中的流体布局，并认为我取得了一些进展，直到我在测试一些东西时遇到这个问题。根据下面的代码，我有两个div应该放在视图的正外面，这样如果你滚动，你应该马上看到它们 与左边距对齐的那个效果很好，但与上边距对齐的div的结果让我摸不着头脑。为了得到想要的结果，我必须将最高利润率设置为42%，我不确定这个数字来自哪里。我估计它会是90%（100%-topbar的高度），起初我认为这可能与包含的浏览器界面有关，但我的界面不可能是48%，将浏览器置于全屏并不能解决这一问题。真正让我感兴趣的是，将导航的高度设置为90%加上topbar的高度设置为10%完全符合预期，那么为什么高度方面的边距会有所不同呢 非常感谢您的帮助，如果您能尽可能多地解释一下，我将不胜感激，因为我仍在努力理解这些属性以及它们是如何工作的Css 与带有百分比值的页边距顶部对齐混淆,css,layout,margin,html,percentage,Css,Layout,Margin,Html,Percentage,我一直在尝试用百分比来处理CSS中的流体布局，并认为我取得了一些进展，直到我在测试一些东西时遇到这个问题。根据下面的代码，我有两个div应该放在视图的正外面，这样如果你滚动，你应该马上看到它们 与左边距对齐的那个效果很好，但与上边距对齐的div的结果让我摸不着头脑。为了得到想要的结果，我必须将最高利润率设置为42%，我不确定这个数字来自哪里。我估计它会是90%（100%-topbar的高度），起初我认为这可能与包含的浏览器界面有关，但我的界面不可能是48%，将浏览器置于全屏并不能解决这一问题。真
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
background-color:#988557;
width:100%;
height:100%;
margin:0%;
}
#topbar {
margin-left:100%;
background-color:#3F4A66;
width:100%;
height:10%;
}
#navigation {
margin-top:42%;
background-color:#3F4A66;
width:10%;
height:90%;
}
</style>
</head>
<body>
<div id="topbar">
</div>
<div id="navigation">
</div>
</body>
</html>
正文，html{
背景色：#988557；
宽度：100%；
身高：100%；
利润率：0%；
}
#顶栏{
左边距：100%；
背景色：#3F4A66；
宽度：100%；
身高：10%；
}
#航行{
利润率最高：42%；
背景色：#3F4A66；
宽度：10%；
身高：90%；
}
>考虑使用一个像素作为边距而不是使用百分比，这是一个好的实践。P> >P>认为使用一个像素作为边距而不是使用百分比是一个好的实践。p> 您神奇的42%来自这样一个事实，即百分比边距是基于包含块的宽度计算的。因此，您指定的上边距是包含#navigation div的块宽度的42%，在本例中是正文
看一下百分比中的百分比
我认为您使用边距顶部：90%
的意思是：在#的顶部添加尽可能多的空间，导航等于视口高度的90%。
浏览器所做的是：向顶部op添加尽可能多的空间#导航等于视口宽度的90%width
如果将浏览器视口完全设置为方形，您将看到90%的视图完全符合您的要求。但是，如果将视口设置为矩形（这更常见），您将看到定位处于关闭状态，符合“宽度百分比”而不是“高度百分比”。您神奇的42%来自这样一个事实，即百分比边距是基于包含块的宽度来计算的。因此，您指定的上边距是包含#navigation div的块宽度的42%，在本例中是正文
看一下百分比中的百分比
我认为您使用边距顶部：90%
的意思是：在#的顶部添加尽可能多的空间，导航等于视口高度的90%。
浏览器所做的是：向顶部op添加尽可能多的空间#导航等于视口宽度的90%width
如果将浏览器视口完全设置为方形，您将看到90%的视图完全符合您的要求。但是，如果将视口设置为矩形（这一点更常见），您将看到定位处于禁用状态，符合“宽度百分比”而不是“高度百分比”。什么？？？你从哪里得到这个主意的？我不相信世界上任何地方都有与之相一致的指导方针。请你添加一个支持这个论点的参考资料好吗？正如我说的，我正在尝试做流体布局，据我所知，这是不可能做到的，或者至少是更难做到的像素。什么？？？你从哪里得到这个主意的？我不相信世界上任何地方都有与之相一致的指导方针。请您添加一个支持此论点的参考资料好吗？正如我所说，我正在尝试进行流畅的布局，据我所知，这在像素方面是不可能做到的，或者至少是更难做到的。很难想象您想要实现什么，你能添加一个简单的图像，用简单的矩形来表示div，给你的布局留下一个视觉印象吗？我很抱歉，我可能没有说得很清楚，但我并没有试图修复任何东西，而是试图理解为什么边距顶部是42%，而不是90%，以使导航div看起来只是看不见。特别是当左边距值以及div的宽度/高度值在没有像42%这样的奇怪数字的情况下工作时，很难想象您想要实现什么，你能添加一个简单的图像，用简单的矩形来表示div，给你的布局留下一个视觉印象吗？我很抱歉，我可能没有说得很清楚，但我并没有试图修复任何东西，而是试图理解为什么边距顶部是42%，而不是90%，以使导航div看起来只是看不见。特别是当左边距值以及div的宽度/高度值在没有像42%这样的奇怪数字的情况下工作时。但我将body的高度设置为100%，据我所知，这会将body延伸到浏览器页面的100%。因此，42%的正文实际上是42%的页面，这不会像它那样将其推离。这种逻辑适用于涉及div顶栏的宽度和左边距，那么为什么涉及div导航的高度和边距顶部不同呢？混淆之处在于，它占据了页面宽度的42%（以像素为单位），并将该值用作#导航的边距顶部
。因此，它使用X轴的百分比来调整Y轴。如果您使浏览器视口完全成方形，您将看到预期的90%符合您的要求。但是因为人们很少使用方形浏览器浏览，所以最终你会感到困惑