为了账号安全,请及时绑定邮箱和手机立即绑定

请问为什么CSS中的边距/填充百分比总是根据宽度计算?

/ 猿问

请问为什么CSS中的边距/填充百分比总是根据宽度计算?

皈依舞 2019-10-20 16:08:29

为什么CSS中的边距/填充百分比总是根据宽度计算?

如果你看看CSS盒模型规范,您将观察到以下情况:

[保证金]百分比是根据宽度生成的框的包含块。请注意,这是正确的‘边缘-顶部’和‘保证金-底部’以及。如果包含块的宽度取决于此元素,则在CSS2.1中未定义结果布局。(强调地雷)

这是真的。但为什么?究竟是什么迫使任何人这样设计它呢?很容易想到你想要的场景,例如,某件东西总是比页面顶部低25%,但是很难想出为什么你想要垂直填充相对于父页面的水平大小。

下面是我所指的现象的一个例子:

<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
  This div is 200x800.  <div style="border: 1px solid blue; margin: 10% 0 0 10%;">
    This div has top-margin of 10% and left-margin of 10% with respect to its parent.  </div></div>

http://jsfiddle.net/8JDYD/


查看完整描述

3 回答

?
九州编程

把我的评论转到一个答案上,因为这是合乎逻辑的。不过,请注意,这是毫无根据的猜测。关于为什么用这种方式编写规范的实际推理,在技术上仍然是未知的。

元素高度由子元素的高度定义。如果一个元素有填充顶:10%(相对于父元素的高度),这将影响父元素的高度。由于子节点的高度取决于父级的高度,而父级的高度取决于子级的高度,所以我们要么有不准确的高度,要么有一个无限循环。当然,这只会影响偏移父=父级的情况,但仍然是这样。这是一个很难解决的奇怪案件。

更新:最后几句可能不完全准确。叶元素(没有子元素的子元素)的高度对其上方所有元素的高度都有影响,因此这会影响许多不同的情况。



查看完整回答
反对 回复 2019-10-21
?
慕村9548890

对于“n%”边距(和填充)为对于margin-top/margin-right/margin-bottom/margin-left,这四个必须相对于相同的基数。如果顶部/底部使用与左/右不同的基数,那么“n%”边距(和填充)在所有四个方面都不意味着相同的东西。

(还请注意,相对于宽度启用一个奇怪的CSS黑客,它允许您指定一个纵横比不变的框.即使该框被重新标度。)


查看完整回答
反对 回复 2019-10-21
?
慕慕0277861

在玩过这个游戏后,我投票赞成@ChuckKolras的答案。JSFiddle(关于Chrome 46.0.2490.86)这个职位(以中文书写)。


反对无限计算猜想是:使用width面对同样的无限计算问题。

看看这个JSFiddleparent显示是inline-block,它有资格在其上定义页边距/填充。这个child有保证金价值20%..如果我们跟着无限计算猜想:

  1. 的宽度。

    child

    取决于

    parent

  2. 的宽度。

    parent

    取决于

    child

但结果是,Chrome停止了计算

如果您试图在JSFiddle上水平展开“结果”面板,您会发现它们的宽度不会改变。请注意,child包在两行(不是,比如说,一行),为什么?我想Chrome只是在某个地方硬编码而已。如果编辑child让它更多的内容(JSFiddle),你会发现,只要水平上有额外的空间,Chrome就会保留两行内容。

所以我们可以看到:有一些方法可以防止无限大的计算。.


我同意这样的猜想:这种设计只是为了保持基于同一度量的四个边际/填充值。

这个职位(用中文写的)另一个原因是:这是因为阅读/排字的方向。我们从上到下阅读,宽度固定,高度无限(实际上)。



查看完整回答
反对 回复 2019-10-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信