html – 为什么页面宽度会影响Firefox中的“margin-top：50％”

发布时间：2020-12-14 21:15:42 所属栏目：资源来源：网络整理

导读：在这个JSFiddle中 http://jsfiddle.net/9UMRk/ div的保证金最高可达50％.我希望调整到页面高度. 但是,如果您在Firefox(3 4)中调整窗口大小,您将看到div的垂直位置受页面宽度的影响,但不受页面高度的影响. 为什么？解决方法它看起来似乎是违反直觉的,但实际

在这个JSFiddle中

http://jsfiddle.net/9UMRk/

div的保证金最高可达50％.我希望调整到页面高度.

但是,如果您在Firefox(3& 4)中调整窗口大小,您将看到div的垂直位置受页面宽度的影响,但不受页面高度的影响.

为什么？

解决方法

它看起来似乎是违反直觉的,但实际上是根据边距的盒子模型,其中指出,in the CSS level 2.1 spec：

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for ‘margin-top’ and ‘margin-bottom’ as well. If the containing block’s width depends on this element,then the resulting layout is undefined in CSS 2.1.

和in the CSS3 spec(更清楚的IMO)：

Note that in a horizontal flow,percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block,not the height (and in vertical flow,‘margin-left’ and ‘margin-right’ are relative to the height,not the width).

(大胆强调我的.)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!