Question

我对css有疑问。如何显示div总是比父元素大20px。所以如果我改变大小，div应该占宽度的100％，然后每边多20px。

Answer 1

你可以让孩子div absolute定位于父母（假设它是position: relative）

然后，您可以将孩子设置为与父亲的宽度和身高相匹配，然后＆＃34;拉伸＆＃34;它通过添加填充和负定位值进行补偿......

请注意，红色方块是父级，半透明叠加层是孩子。

＆＃13;

body {
  margin-top: 50px;
}
.parent {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  margin: 0 auto;
}
.child {
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  content: " ";
  background: rgba(0,0,0,0.4);
  padding: 20px;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="parent">
  <div class="child">
  </div>
</div>

＆＃13;

请注意：我确信有一种更优雅的方式来实现这一点，而不是我所做的，但它似乎在任何情况下都有效！

Answer 2

您是否尝试过calc()：

width: calc(100% + 20px)

每边加20px：

height: calc(100% + 40px)
margin: -20px 0 0 -20px
width: calc(100% + 60px)

..或

height: calc(100% + 40px)
transform: translate3d(-20px,-20px,0)
width: calc(100% + 60px)

Answer 3

为什么不反过来呢？父母应该大20px。

如果你真的需要这个，你可以这样做：

.parent{
    position:relative;
    width:100px;
    height:100px;
}

.parent .child{
    width:calc(100% + 40px);
    height:calc(100% + 40px);
    position:absolute;
    left:-20px;
    top:-20px;
}

<div class="parent">
    parent
    <div class="child">
        child
    </div>
</div>

Answer 4

这里使用cal（）函数的另一个解决方案。

 Here is JSfiddle: https://jsfiddle.net/arifkarim/ohmfaj2d/

css显示图像20 px外div

4 个答案: