-
可以对元素的margin设置百分数,百分数是相对于父元素的width计算,不管是margin-top/margin-bottom还是margin-left/margin-right。(padding同理)
-
如果没有为元素声明width,在这种情况下,元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式,使其元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小。
-
为什么margin-top/margin-bottom的百分数也是相对于width而不是height呢?
-
我们认为,正常流中的大多数元素都会足够高于包含其后代元素(包括外边距),如果一个元素的上下外边距是父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,如此循环。
<style> .fu { width: 400px;
前端面试题:当margin-top、padding-top 的值是百分比时,分别是如何计算的?
最新推荐文章于 2025-10-02 11:36:10 发布
前端元素的margin和padding设置为百分比时,百分值是相对于父元素的width计算。这可能导致流式布局,使得元素外边距随父元素宽度变化。为何margin-top/margin-bottom不是按height计算?因为按height可能导致无限循环的尺寸调整。加陆荣涛前端学习交流群了解更多。

最低0.47元/天 解锁文章
1058





