box-sizing + 边框 + 绝对子级

Question

我最近发现了这个问题。

检查 jsfiddle 上的演示

至于我，轮廓表现错误，不是吗？ .outside元素的盒子模型不应该包括它的边框，以便absolute定位的子元素也勾勒出这些边框吗？

这是一个已知问题吗？ 这真的是正确的行为吗？ 如果是这样，有人可以向我解释为什么会这样吗？

我期望的结果

请不要评论如何解决问题。 但请解释为什么会出现问题。

提前致谢:)

问候菲利普斯

Answer 1

只是box-sizing: border-box是不够的，你需要从父级继承宽度和高度：

.inside {
  position: absolute;
  outline: #00f solid 2px;
  width: inherit;
  height: inherit;
}

在这里查看https://jsfiddle.net/2mytb43a/3/

Answer 2

这是正常的，因为position: absolute将相对于容器定位元素。 默认情况下，容器是浏览器窗口，但是如果父元素上position: relative或position: absolute ，那么它将充当父元素，为其子元素定位坐标。

对于父级，您有 2 个属性：

border-right: 50px #f5f solid;
border-bottom: 50px #f5f solid;

如果删除它，轮廓将是完整大小，因为您设置了 4 个属性： top, right, bottom, left为 0。（更改它以查看更改）。

Answer 3

在这种情况下，当使用 position: absolute ..

.. 包含块由祖先的填充边缘形成。

参见CSS 规范 - 10.1 “包含块”的定义

不管什么原因..