html - 使用边框时伪元素不是完整的容器宽度

Question

我有一段 html/css 表示带边框的按钮。

按钮具有覆盖按钮的伪元素 - 简单示例显示了其中之一。

伪元素比原始元素高(高度使用 px 设置)但宽度相同(设置为 100%)。

在当前设计中有两个问题没有达到我的预期:

1. 尽管使用了 box-sizing: border-box，伪宽度并不 包括边框。
2. 伪元素是绝对定位的(top, left) 但是这个 引用位置在父边框内。

这在 Chrome 和 Edge 中似乎是一样的，这表明我没有做正确的事情 - 然而，我对盒子大小特别困惑。

.container {
  padding: 50px;
}

.button {
  border: solid 4px red;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.button::before {
  background-color: rgba(76, 255, 0, 0.8);
  box-sizing: inherit;
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  left: 0;
  height: 44px;
  width: 100%;
  z-index: -1;
}

<div class="container">
  <a class="button">Button</a>
</div>

Answer 1

来自 the specification

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

....

4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
   1. In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
   2. Otherwise, the containing block is formed by the padding edge of the ancestor

然后

The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

这解释了为什么您的元素不使用边框作为引用，而是在定位时使用填充框。百分比宽度 ¹ 也一样。使用 width:100% 表示包含 block 的填充和内容。边界不算在内。

---

关于box-sizing

... , any padding or border specified on the element is laid out and drawn inside this specified width and height.

所以边框需要属于元素而不是父元素才能考虑 box-sizing 这不是你的情况，因为边框没有应用于伪元素:

---

¹ For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.^ref

.box {
  border:5px solid;
  padding:10px;
  background:red;
  min-height:100px;
  position:relative;
}
span:first-child {
  display:inline-block;
  width:100%;
  background:blue;
}
span:last-child {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background:green;
}

<div class="box">
  <span>I am a static element</span>
  <span>I am a absolute element</span>
</div>

获得所需内容的一个想法是使用 inset box-shadow 而不是 border:

.container {
  padding: 50px;
}

.button {
  box-shadow: inset 0 0 0 4px red;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.button::before {
  background-color: rgba(76, 255, 0, 0.8);
  box-sizing: inherit;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

<div class="container">
    <a class="button">Button</a>
</div>