再说 Margin 和 Padding 百分比设置

发布于 2019-04-27 21:31:03 字数 1850 浏览 1526 评论 0

前段时间分享了一篇文章《浅谈Margin和Padding值设置成百分数的布局》,其中讲解了 Margin 和 Padding 百分比设置的表现,但是并没有细说为什么会这样?

Margin 和 Padding 百分比参照物

Margin 和 Padding 都可以使用百分比值的形式,但有一点可能和通常的想法不同,就是 margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度,而是父级容器的宽度 。

引用W3c的表述

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.

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

宽度参照宽度这点毫无疑问,但高度参照的也是宽度这点,可能就和通常的思路相左,因为毕竟 height 应用百分比参照的,依然是容器的高度。

关于为什么标准要这么定义,有几种通常的解释,就一并分析一下。由于 padding 和 margin 类似,下文就只以 padding-top 为例。

为什么参照物不同?

下面我们就一起来看看,为什么填充和间距的四个值参照物为什么不同。

1、高度持续增加

第一种说法是,padding-top 如果以容器高度为参照,那么子元素应用 padding 值将会继续加高容器的高度,容器高度的变化又会反过来继续影响子元素的 padding-top,陷入一个无限循环。

对于不定高的容器来说情况确实如此,但对定高容器则并不成立,这点和 height 类似,这也是为什么 height 的容器也必须确定好高度。也就是说,如果 padding-top 要参照容器高度,就必须和 height 一样做两种处理。

2、保持 padding(margin) 四个值统一

第二种说法则更为可靠, 为了保持 padding(margin) 四个值的统一

padding(margin) 的值无论引用何种计量,四个值都一直保持统一,难道单独给百分比开特例?结合第一条的多情况处理,如果标准定义 padding-top 参照容器高度的话,恐怕要列出至少4条以上的例外说明——而这对无论谁,都没有好处。

事实上,垂直 padding 参照体是宽度这点也非常有用。虽然早期固化像素的设计中百分比值几乎不应用在 padding 或者 margin 上,但随着移动自 适应的布局的需要,百分比也逐渐稀疏平常。

比如配合 background-sizing 保持背景的比例,配合 media query 调整对应的间距,不一而足。这些应用都基于一个事实: 无论垂直还是水平,百分比值始终参考宽度

而宽度,实际上,正是自适应和现代 web 设计的灵魂。

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

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

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

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