个人中心
gpt4 book ai didi

CSS 2.1 规范 : rationale for not collapsing margins of parent (when parent is float or has overflow other than visible)

转载 作者：行者123 更新时间：2023-11-28 11:39:53 26 4
gpt4 key购买 nike

CSS 2.1 specification, section 8.3.1关于崩溃的边距状态:

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

我花了一段时间才意识到 block 格式化上下文是由 parent 建立并应用于 child 的上下文，为了有所作为， float 或溢出属性具有在父元素(而不是子元素)上进行调整。

在下面的代码片段中，相邻子div元素的边框高度collapse，使任意两个子 div 元素之间有一个垂直间距max(20px, 20px) = 20px 而不是 20px + 20px = 40px，以及边框高度在第一个子元素和父 div 之间，以及在最后一个子元素之间和父 div，也分别是 max(20px, 0px) = 20px 而不是 20px + 20px = 40px。请注意，按照 CSS 2.1 规范，水平方向不会出现折叠。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
</style>
</head>
<body style="background: green;">
  <div id="wrapper" style="width: 400px; background: black;
                           /* overflow: hidden; *//* float: left; */">
    <div id="box1" style="margin: 20px; height: 100px; background: red;">
    </div>
    <div id="box2" style="margin: 20px; height: 100px; background: blue;">
    </div>
    <div id="box3" style="margin: 20px; height: 100px; background: red;">
    </div>
    <div id="box4" style="margin: 20px; height: 100px; background: blue;">
    </div>
  </div>
</body>
</html>

Case 1

如果红色 box1 元素的上边距没有与其父元素一起折叠，这样的边距将没有将黑色背景推到边距以下，红色框 1 的边距会叠加在父元素的黑色背景上。类似的论点适用到底部的蓝色 box1 元素。

现在，正如 CSS 2.1 规范所提到的，如果“float: left;”中的任何一个或“溢出:隐藏；”包含 div 的部分被注释掉，然后是父级的顶部和底部边框元素(在本例中为 0)和第一个子元素的顶部(在本例中为 10px)边框，和底部 child 的底部(在本例中为 10px)边框，是分开的，产生结果如下图:

enter image description here

现在，问题来了:

将此规则引入 CSS 的基本原理是什么？这只是一个随机的决定，还是受到一些真实的、实际的例子的启发？ (知道这一点也会帮助我记住规则，除了满足我的好奇心)。

谢谢。

最佳答案

我能给出的唯一合理的解释是 block 格式化上下文是原子的，在某种意义上，一个 block 格式化上下文中的框永远不能与另一个 block 格式化上下文中的框交互。这条关于折叠边距的规则似乎与 float 从不侵入其他 block 格式化上下文或将它们自己的 block 格式化上下文退出到祖先 block 格式化上下文中的规则一脉相承。

对此进行扩展:建立新 block 格式化上下文的框的流入后代参与该框的 block 格式化上下文，而框自身参与已建立的 block 格式化上下文在布局树中更高的地方。因此，框本身的边距预计会与同一 block 格式化上下文中的框一起折叠，而不是后代框。

Section 9.4.1似乎支持这一点:

Vertical margins between adjacent block-level boxes in a block formatting context collapse.

请注意，它说“ block 格式化上下文中的相邻 block 级框”——这意味着边距不会跨 block 格式化上下文折叠是 block 格式化上下文的固有属性。但这只是我对规范的解释；我不是作者，所以我不能确定这是否是预期的意思。

关于CSS 2.1 规范 : rationale for not collapsing margins of parent (when parent is float or has overflow other than visible)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19756678/

26 4 0
文章推荐： swift - macOs Swift 更改最小化行为？
文章推荐： javascript - 为什么 jQuery .text 会替换整个范围？
文章推荐： css - 如何使用 bootstrap3 网格将元素放置在列中
文章推荐： swift 4 : Can an object remove itself from a collection
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com