javascript - 继承没有绝对位置的填充宽度？可能吗？

Question

不确定，但我目前无法弄清楚。我试图将来自父级(红色背景)的内部 div(蓝色透明的)置于背景内的中心。例如，在代码段的第一个示例中，它们在技术上完美地融合在一起。

但是，在第二个示例中，我将 padding: 5px; 添加到红色和蓝色的两个。蓝色的是因为我想以某种方式继承宽度。

https://jsfiddle.net/L8enbcy3/

.box-1-1 {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  display: block;
}

.box-1-2 {
  width: 50px;
  height: 50px;
  background: #0000ffb0;
  position: relative;
}


.box1 {
  width: 50px;
  height: 50px;
  background: red;
  padding: 5px;
  position: relative;
  display: block;
}

.box2 {
  width: 50px;
  height: 50px;
  background: #0000ffb0;
  padding: 5px;
}

<div class="box-1-1">
  <div class="box-1-2"></div>
</div>

<pre>
  
  
  
  
</pre>


<div class="box1">
  <div class="box2"></div>
</div>

我正在尝试的是让“box2”像示例 1 一样居中放置在“box1”中，但带有填充，所以它被蓝色覆盖。如果可能的话，不必 position: absolute 它。我想我必须做的是创建和不可见的盒子绝对它，“当父级有 时，将它与 top: 0 和 left: 0 居中position: relative。然后正如我提到的那样，它是绝对的，它也会到达父填充的 Angular 落，然后在绝对框中，我将创建一个带有 display: table 并放入所有内容。

但我现在的问题是，还有其他方法吗？

Answer 1

解决方案 1:转换:translate()

您可以使用带有变量的 transform: translate() 来实现您想要的效果，而不会出现奇怪的边距(下一个解决方案)。 Here's一些关于 translate() 的 MDN。

:root {
  --padding: 5px;
}

.box1 {
  height: 50px; 
  width: 50px;
  background-color: red;
  padding: var(--padding);
}

.box2 {
  height: calc(50px + var(--padding)*2);
  width: calc(50px + var(--padding)*2);
  background-color: #0000ffb0;
  transform: translate(calc(0px - var(--padding)), calc(0px - var(--padding)))
}

<div class="box1">
  <div class="box2"></div>
</div>

如您所见，框被带上并留下了翻译，并且通过向其添加所需的填充来加长高度。这样就达到了想要的遮盖效果。

方案二:正填充，负边距

您还可以使用正填充和负边距。代码段下方的信息。

:root {
  --padding: 5px;
}

.box1 {
  height: 50px; 
  width: 50px;
  background-color: red;
  padding: var(--padding);
  position: relative;
  display: block;
}

.box2 {
  height: 50px;
  width: 50px;
  background-color: #0000ffb0;
  padding: var(--padding);
  margin: calc(0px - var(--padding));
}

<div class="box1">
  <div class="box2"></div>
</div>

这里发生的是遵循 CSS 盒模型，在 MDN 上找到和 w3schools .我们只是用 margin 推出并用 padding 吸进去。

然后，根据评论中的要求，--padding 是 CSS variable存储你想要的填充量。

希望我有所帮助!

干杯，博贝