在前端开发中，我们经常会使用百分比来设置元素的宽度、高度和定位，但是当我们尝试使用百分比来设置 margin-top 属性时，可能会遇到一些意想不到的问题。
问题描述
考虑以下 HTML 结构：
<div class="box"> <p>Some content here</p> </div>
假设我们想要给 <p> 元素添加一个 margin-top 为父元素高度的 50%。我们可能会这样设置 CSS：
.box {
height: 200px;
position: relative;
}
p {
margin-top: 50%;
}然而，该段代码并不能达到预期效果。实际上，<p> 元素的 margin-top 值是相对于其父元素的 width 而不是 height。因此，该段代码将使 <p> 元素垂直居中且水平方向具有 50% 的外边距。
原因解析
对于绝对或固定定位的元素，margin-top 和 margin-bottom 属性可以使用百分比。但是对于其他元素，这些属性的百分比值将被忽略。
当我们使用百分比来设置 margin-top 时，浏览器会将百分比转换为像素值。这个像素值是相对于父元素的 width 而不是 height。因此，如果父元素的高度和宽度不相等，则 margin-top 的表现可能会出现问题。
解决方案
要解决这个问题，我们可以使用绝对或固定定位的元素来占用父元素的空间并设置它们的 top 和 bottom 属性为 0，然后在内部元素中使用百分比值的 margin-top。这将创建一个与父元素高度相同的绝对定位容器，让我们可以使用它来测量真正的百分比 margin-top。
以下是示例代码：
<div class="box"> <div class="placeholder"></div> <p>Some content here</p> </div>
-- -------------------- ---- ------- ---- - --------- --------- - ------------ - --------- --------- ---- -- ------- -- ------ ----- - - - ----------- ---- -
在这个例子中，我们使用了一个绝对定位的 <div> 元素作为占位符，并将其 top 和 bottom 属性都设置为 0。这样做可以让它占据整个父元素的高度。而在内部的 <p> 元素中，我们使用了 50% 的 margin-top，这个百分比值相对于我们新创建的占位符元素的高度。
总结
在前端开发中，我们需要注意使用百分比来设置 margin-top 的行为可能与我们预期的不同。如果我们需要使用百分比来设置 margin-top，我们可以创建一个绝对定位的占位符元素来解决这个问题。希望这篇文章能够帮助你理解并解决这个怪异的问题！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29433