(转)当margin-top、padding-top的值为百分比时是如何计算的？

本文连接：https://blog.csdn.net/qq_27437967/article/details/72625900
问题：当margin-top、padding-top的值是百分比时，分别是如何计算的？
A 相对父级元素的height，相对自身的height
B 相对最近父级块级元素的height，相对自身的height
C 相对父级元素的width，相对自身的width
D 相对最近父级块级元素的width，相对最近父级块级元素的width

答案：D

能够对元素的margin设置百分数，百分数是相对于父元素的width计算，无论是margin-top/margin-bottom仍是margin-left/margin-right。（padding同理）

若是没有为元素声明width，在这种状况下，元素框的总宽度包括外边距取决于父元素的width，这样可能获得“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。若是对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

为何margin-top/margin-bottom的百分数也是相对于width而不是height呢？

CSS权威指南中的解释：

咱们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），若是一个元素的上下外边距时父元素的height的百分数，就可能致使一个无限循环，父元素的height会增长，以适应后代元素上下外边距的增长，而相应的，上下外边距由于父元素height的增长也会增长，若是循环。

---

原文连接：https://blog.csdn.net/qq_27437967/article/details/72625900