html - 左/右定位考虑了边框大小

Question

我的目标是能够动态定位 DIV，以便它在视觉上精确地位于其父级下方 - 即，使其与父级宽度相同，并且从父级左边框底部开始 0 像素。

基本上，最终结果应该是这样的:

http://jsfiddle.net/cvz3gvbs/

这里我简单的使用了一个相对定位的父DIV，和一个绝对定位的子DIV。然后我简单地使用 left 和 top 定位属性将子 DIV 移动到位。

但是，您会在那个 fiddle 中注意到，为了实现这一点，我必须在子 DIV 上设置 left: -10px。原因是如果我不这样做，就会发生这种情况:

http://jsfiddle.net/cvz3gvbs/1/

在这里，子 DIV 不直接位于父 DIV 的中央。原因似乎是 left 和 right 位置值考虑了父级的 border ，所以 left: 0px 表示直接定位到父边框结束位置的右侧。

所以我必须用一个负的 left 值来弥补这一点。没关系，除非我希望能够使用 Javascript 动态执行此操作，否则我可能事先不知道父边框的粗细 -(或者即使父边框有)。所以我不能简单地在样式表中硬编码负像素值。我不得不使用Javascript动态查询父元素的计算样式并确定父元素的边框宽度，这有点麻烦。

问题:有没有什么方法不使用 Javascript 来发现边框宽度？

我认为这可能与 W3C box model 有关，因为 left 考虑到了父元素的边界。因此，我尝试使用 box-sizing: border-box 属性，以便浏览器在框大小中包含 border-width - 但这没有效果。 0px 的 left 值仍然表示直接位于父元素边框的右侧。

Answer 1

.bar 必须在 .foo 中吗？您可以让它们成为 sibling ，并将它们包装在一个设置为 relative 的容器中，就像这样。您甚至不需要为它们中的每一个设置 width，只需在它们的父级上即可:

HTML

<div class="container">
   <div class = "foo"></div>
   <div class = "bar"></div>
</div>    

CSS

.container{
  width: 200px;
  position: relative;
}

.foo {
  border: 10px solid #000000;
  height: 45px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; 
}

.bar {
  box-sizing: border-box;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  border: 1px solid #000000;
  height: 500px;
}

FIDDLE