1、问题描述：
给子元素设置 margin-top 是 10%，则这个百分比的基数是父元素的宽度。
2、问题解析：
当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为基数进行渲染的。
比较有说服力的一种说法是，父元素的高度往往由子元素来决定，如果margin-top比例增加，相应的，父元素高度也会进行适应性增加，此时父元素增加的同时，margin-top的实际数值又会发生适应性变化，双向因果会造成循环，所以W3C的规范做出了以上规定。
在查询资料的过程中，有人提出，如果子元素高度确定的情况下，只要给出margin-top的比例数值，就可以通过数学公式得到父元素高度的数值，不存在循环。个人感觉即使子元素高度确定，父元素高度也已经确定了，父元素的自适应根据子元素直接适应，在margin/padding设置过程中，父元素已经确定，肯定会直接抓取父元素高度数据进行渲染，渲染结果也必然会造成margin/padding数值的偏差。说能计算出父元素高度并进行渲染的是不是忽略了网页元素渲染的先后与主次，也许高估了网页渲染的智能程度，真正原因是什么，其实不必太纠结，W3C提出了标准，我们按标准进行开发即可。
网友评论