Question

考虑以下jsfiddle供参考：

<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似乎没有效果。

我想将一个子元素直接放在其父元素的 border-box 下面，即无论它们有多厚，两个边框都应该相邻。这可能吗？

Answer 1

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

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

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

这似乎是对我的疏忽; top: x%的含义应该真正取决于父母的box-sizing值......

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

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

² _{Floats，例如，高度倾向于框的边界边缘，以至于they can appear to collapse margins位于你通常的地方不希望它发生。}

Answer 2

尝试将display:table;用于外部div。

小提琴：http://jsfiddle.net/apmmw2ma/9/

Answer 3

不幸的是，如果不重复父边框宽度的值，就不可能这样做。

但是，如果重复边框宽度值是可以接受的，则以下解决方案有效：

div.inner {
    top: <desired top value, e.g. 100%>;
    margin-top: <parent’s border-bottom-width>;
    left: <desired left value, e.g. 0>;
    margin-left: -<parent’s border-left-width>;
}

将来，calc()也是如此，在撰写本文时，支持的范围不够广泛：

div.inner {
    top: calc(<desired top value, e.g. 100%> + <parent’s border-bottom-width>);
    left: calc(<desired left value, e.g. 0> - <parent’s border-left-width>);
}

如果我可以为将来做梦，我希望能够在calc()表达式中引用父母/祖先的属性值。然后我可以写下这样的东西：

/* Hypothetical code that will never work */
div.inner {
    top: calc(100% + parent.border-bottom-width);
    left: calc(0 - parent.border-left-width);
}

Answer 4

使用`box-shadow`

这样可以按照您期望的方式使用box-sizing模型：

http://jsfiddle.net/apmmw2ma/6/

-webkit-box-shadow:inset 0px 0px 0px 5px green;
-moz-box-shadow:inset 0px 0px 0px 5px green;
box-shadow:inset 0px 0px 0px 5px green;

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

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

4 个答案:

使用`box-shadow`

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

4 个答案:

使用box-shadow

使用`box-shadow`