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

我有一段html/css，它表示一个带有边框的按钮

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

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

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

尽管使用了“框大小：边框框”，但伪宽度不会改变 包括边界

伪元素是绝对定位的（顶部，左侧），但是 参考位置在父边框内

这在Chrome和Edge中似乎都是一样的，这表明我做得不对——然而，我对盒子的尺寸特别困惑

.container{
填充：50px；
}
.按钮{
边框：实心4px红色；
框大小：边框框；
显示：内联flex；
证明内容：中心；
对齐项目：居中；
高度：36px；
填充：0 16px；
位置：相对位置；
z指数：1；
}
.按钮：：之前{
背景色：rgba（76255,0,0.8）；
框大小：继承；
内容：“；
显示：块；
位置：绝对位置；
顶部：-4px；
左：0；
高度：44px；
宽度：100%；
z指数：-1；
}

按钮

尝试使用父元素边框的大小增加伪元素的宽度，并使用

left:-4px将其向左移动：


.container{
填充：50px；
}
.按钮{
边框：实心4px红色；
框大小：边框框；
显示：内联flex；
证明内容：中心；
对齐项目：居中；
高度：36px；
填充：0 16px；
位置：相对位置；
z指数：1；
}
.按钮：：之前{
背景色：rgba（76255,0,0.8）；
框大小：继承；
内容：“；
显示：块；
位置：绝对位置；
顶部：-4px；
左：-4px；
高度：44px；
宽度：计算（100%+8px）；
z指数：-1；
}

按钮
来自

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


如果元素具有“位置：绝对”，则包含块由“位置”为“绝对”、“相对”或“固定”的最近祖先以以下方式建立：
在祖先是内联元素的情况下，包含块是围绕为该元素生成的第一个和最后一个内联框的填充框的边界框。在CSS 2.1中，如果内联元素跨多行拆分，则包含的块未定义
否则，包含块由祖先的填充边形成

然后

填充边围绕着长方体填充。如果填充宽度为0，则填充边与内容边相同。四条填充边定义了框的填充框

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


关于

，元素上指定的任何填充或边框都将在此指定的宽度和高度内进行布局和绘制

<> P>因此，边界必须属于元素而不是父元素，以考虑<代码>框大小 >这不是你的情况，因为边界不应用于伪元素：


1对于绝对定位的元素，其包含的块基于块容器元素，百分比是根据该元素的填充框的宽度计算的


.box{
边框：5px实心；
填充：10px；
背景：红色；
最小高度：100px；
位置：相对位置；
}
跨度：第一个孩子{
显示：内联块；
宽度：100%；
背景：蓝色；
}
最后一个孩子{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
背景：绿色；
}

我是一个静态元素
我是绝对的元素
这是合乎逻辑的，边框在父元素上而不是伪元素上，框大小与此无关。。是的，引用是填充框，而不是边框。位置在其父对象内部，因为父对象具有
位置：相对
@TemaniAfif——我不相信盒子的尺寸是合乎逻辑的。比如说，父级宽度为100px，包括8px边框（4px x 2），我希望伪值的宽度也为100px。不，元素的父级宽度减去边框边框框告诉浏览器在为元素的宽度和高度指定的值中考虑任何边框和填充。我不知道为什么这个答案会被标记下来——如果Temani Afif所说的是正确的，那么唯一的解决办法就是使用这样的方法来修复它。