对元素的margin设置百分数时，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。当然，padding的原理也是一样的。
如果没有为元素声明width，此时元素框的总宽度包括外边距取决于父元素的width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。
为什么margin-top/margin-bottom的百分数是相对于width而不是height呢？
CSS权威指南中的解释：
我们认为，正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距时父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。
对元素的margin设置百分数时，百分数是相对于父元素的width计算，不管是margin-top/margin-...
当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父...
当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父...
margin和padding使用的百分比相对与父元素宽度计算的position绝对定位时，top和bottom相对...
当margin属性值的单位为百分比时：margin：60%;，有两点要注意： 一、其具体值是根据父元素的宽度计算的...
重点： 当margin/padding取形式为百分比的值时,以父元素的宽度作为参照物 当left/top取形式为百...
本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/...
本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/...
width：x% 父元素width的x%横向和竖向的padding margin border 的百分比属性值 都...
原理:padding的百分比是根据父元素的宽度计算的，所以当width是百分比时，可以使用padding-top拉...
本文标题：当margin和padding的值是百分比时，应该如何计算的？
本文链接：https://www.haomeiwen.com/subject/nxieuxtx.html
网友评论