Question

我有一块html / css，代表一个带有边框的按钮。

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

伪元素比原始元素高（使用px设置高度），但宽度相同（设置为100％）。

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

尽管使用box-sizing：border-box，但伪宽度不包括边界。
伪元素绝对位于（顶部，左侧），但这是参考位置在父边框之内。

在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

有时会相对于某个矩形（称为元素的包含块）来计算元素框的位置和大小。元素的包含块定义如下：

....


如果元素具有'position：absolute'，则包含块是由最接近的祖先建立的，其“ position”为“ absolute”，“ relative”或“ fixed”，如下所示办法：

在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。在CSS 2.1中，如果将inline元素拆分为多行，则包含块未定义。

否则，包含块由祖先的填充边
形成

然后

填充边围绕框填充。如果填充的宽度为0，则填充边缘与内容边缘相同。四个填充边定义了框的填充框。

这说明了为什么元素定位时不使用边框作为参考，而是使用填充框。百分比宽度¹也相同。使用width:100%表示包含块的填充和内容。不包括边框。

关于box-sizing

...，将元素上指定的任何填充或边框布置并绘制在此指定的宽度和高度内。

因此边框需要属于元素而不是父元素，以便考虑box-sizing，这不是您的情况，因为边框没有应用于伪元素：

¹对于绝对定位的元素（其包含的块基于块容器元素），该百分比是相对于填充框的宽度< / strong>。^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>

获得所需内容的想法是使用插入框阴影而不是边框：

.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>

Answer 2

尝试使用父元素的边框大小增加伪元素的宽度，并使用left: -4px将其移到左侧：

.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: -4px;
  height: 44px;
  width: calc(100% + 8px);
  z-index: -1;
}

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

使用边框时，伪元素未达到完整的容器宽度

2 个答案: