浅谈 Margin 和 Padding 值设置成百分数的布局

发布于 2018-10-17 20:12:27 字数 2640 浏览 1518 评论 0

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

Margin

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

HTML 代码

<div class="demo1">
  <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,这是怎么回事呢?

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

总结

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

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

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

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

延伸阅读

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。