你的位置:首页 > 网页设计

[网页设计]浅谈Margin和Padding值设置成百分数的布局


转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html

Margin和Padding是我们在网页设计经常使用到的CSS样式,他们分别是间距和填充,一个作用于盒子外面,一个作用于盒子里面,默认的情况下,这些属性的值都会被计算在盒子的面积里面,在网页开发中的流体布局或者是响应式布局中,经常将Margin和Padding设置成百分数,那么到底这个百分数是多少,他是如何计算的呢?

Margin

假设我们有这样的一段HTML代码,外面一个DIV宽度980px,高度500px,里面有一个子元素DIV,宽度和高度都不设置,然后给他设置margin:10% 5%,这个属性相当于margin:10% 5% 10% 5%

HTML代码

<div >    <div>这个div设置:margin:10% 5%</div></div>

CSS代码

.demo1{ height:500px; width:980px; margin:0 auto; background:#EEE; overflow:hidden;}.demo1 div{margin:10% 5%; background:#666;}

为了方便查看效果,我们还分别为他们设置了不同的背景。

这里还出现了一个小的hack,就是demo1盒子不会紧挨着body,也就是不会定格布局,而且body元素上面还有一段空白,这段空白的高度刚好是.demo1 div元素的margin-top,demo1和.demo1 div元素都是顶格对其的,只要给demo1元素设置overflow:hidden,即可解决这个问题,点击这里查看示例。

我们根据以往的理解,.demo1 divmargin应该是:50px 49px 50px 49px,但是运行以后,通过查看盒模型示意图,却发现是:98px 49px 98px 49px,这是怎么回事呢?

HTML元素盒子模型

这个98px是如何得到的呢,其实就是宽度的10%,等等,我们设置TOP为10%,不是应该参考元素的高度么,不信你可以点击这个示例页面看看效果。

总结

从上面的示例和代码,我们可以发现当margin设置成百分数的时候,其top right bottom left的值是参照父元素盒子的宽度进行计算,在w3c的规范中也是这样描述的: margin 的百分比值参照其包含块的宽度进行计算,同样的padding如果设置成百分数的话,其盒子模型和margin是一样的。

这只发生在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下,当书写模式变成纵向的时候,其参照将会变成包含块的高度。

为什么要选择宽度做参照而不是高度呢?

这其实更多的要从CSS设计意图上去想,因为CSS的基础需求是排版,而通常我们所见的横排文字,其水平宽度一定(仔细回想一下,如果没有显式的定义宽度 或者强制一行显示,都会遇到边界换行,而不是水平延展),垂直方向可以无限延展。但当书写模式为纵向时,其参照就变成了高度而不再是宽度了。

延伸阅读

  • http://dev.w3.org/csswg/css-box/#the-margin-properties
  • http://dev.w3.org/csswg/css-box/#ltpercentagegt
  • http://dev.w3.org/csswg/css-box/#Calculating