是否可以相对于其父级的边框设置元素？

Question

请考虑以下jsfiddle以供参考:

http://jsfiddle.net/apmmw2ma/

<div class='outer'>
    <div class='inner'>
        Inner.
    </div>
    Outer.
</div>

div.outer {
    position: absolute;
    left: 10px;
    top: 10px;
    border: 5px solid green;
    padding: 10px;
}
div.inner {
    position: absolute;
    left: 0;
    top: 100%;
    border: 10px solid red;
    padding: 15px;
}

正如您所看到的,"内部"框(带有红色边框)相对于外部的填充框left:0定位:将其定位在外部边框的右侧,并且top:100%似乎表示"100%的内容加上填充,但是不是边界".

不幸的是,添加box-sizing: border-box到外部div似乎没有任何效果.

我想将一个子元素直接放在它的父边框之下,即两个边框应该相邻,无论它们有多厚.这可能吗？

Answer 1

不幸的是，如果不提前知道边框宽度，这是不可能的。如果您事先不知道边框宽度，或者它们是动态的，那么您就不走运了。¹

元素的包含块的区域实际上被定义为形成包含块的元素的填充边缘。这是在规范中明确规定的，并且是设计使然；后代通常不应该溢出其容器的边框，除非容器已经overflow: visible建立并且没有建立 BFC（即使如此，效果也只是视觉上的；它不会影响布局）。否则，边界就不再是边界了。

一般来说，如果您想对元素进行布局，使其通过边框或外边缘进行交互，则不希望将它们布置为祖先和后代。至少你希望他们是兄弟姐妹²，否则他们应该完全不相关。

对我来说，这似乎是一个疏忽；的含义top: x%实际上应该取决于box-sizing父母的价值......

的目的box-sizing是更改框大小的计算方式（即填充或边框是否应添加到width和指定的尺寸height）；虽然您可以使用它来更改元素的填充框的大小，但包含块的区域（如果该元素生成一个）仍然由该填充框定义。

¹ _{这可以想象通过自定义属性来解决，但前提是您必须将相同的自定义属性分配给父级的边框宽度和子级各自的偏移量，这基本上是“您必须知道边框宽度”的另一种说法提前”或者至少控制它们。}

² _{例如，浮动非常容易出现在框的边框边缘，以至于它们可能会在您通常不会想到的地方折叠边距。}