通过忽略父 div 填充来实现 css 100% 宽度的最佳方法

Question

对于以下 DOM，只有 child3 应该具有 100% 宽度，忽略/覆盖父容器的填充，其余子元素应该具有 100% 宽度，同时也尊重填充

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
  <div class="child4"></div>
  <div class="child5"></div>
  <div class="child6"></div>
</div>

容器 CSS 的约束

.container {
    width: 300px;
    padding: 40px;
}

实施同样的最佳方法是什么？ 实现这一目标的一种方法是：

.child3 {
    width: 300px;
    margin-left: -40px; /*to offset parent container's padding*/
}

这是我的代码的作用：

.container {
    width: 300px;
    padding: 40px;
}
.child3 {
    width: 300px;
    margin-left: -40px; /*to offset parent container's padding*/
}

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
  <div class="child4"></div>
  <div class="child5"></div>
  <div class="child6"></div>
</div>

这是一个粗略的图表，显示了我想要它做什么

Answer 1

• 如果你希望更加动态，那么使用 css 变量将使你的代码更有效
• 我们在这里使用

  --padding

  变量。要更改变量的值，只需在

  :root

  中更改即可。
• 我使用了 1px 边框来显示差异（黑色是父级，红色是子级）
• 我用于宽度的公式是，
  

  total possible length when not parent padding is ignored + twice the padding(becuase padding acts on both side) - 1px(which is border)

  
  保证金是

  -padding

代码片段：

:root {
  --padding: 40px;
}
.container {
    width: 300px;
    padding: var(--padding);
    height: 100px;
    border: 1px solid black;
}
.child3 {
    width: calc(100% + (2*var(--padding)) - 1px);
    margin-left: calc(0px - var(--padding)); /*to offset parent container's padding*/
}
.container *{
border: 1px solid red;
height:5px;
}

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
  <div class="child4"></div>
  <div class="child5"></div>
  <div class="child6"></div>
</div>

Answer 2

另一种方法是这样写（当我看到布局时）...... 如果我错了，请原谅，因为我删除了填充并为 div 添加了边距，并与您添加到帖子中的图像相匹配。

看看@Roko C. Buljan 的时刻

我不知道您是否想这样做，所以请告诉我它是否适合您，或者我是否必须删除我的答案。

AMO 似乎不那么棘手。

    *{
        box-sizing: border-box;
    }
    .container {
        width: 300px;
        padding-top: 40px;
        padding-bottom: 40px;
        border:1px solid #000000;
    }
    .container div{
        margin-left: 40px;
        margin-right: 40px;
        margin-bottom: 10px;
        height:20px;
        border:1px solid #000000;
    }
    .container .child3 {
        width: 100%;
        margin-left:auto;
        margin-right:auto;
        border:1px solid #ff0000;
    }
    .container .child6 {
        margin-bottom: 0px;
    }

<div class="container">
      <div class="child1">My content 1</div>
      <div class="child2">My content 2</div>
      <div class="child3">My content 3</div>
      <div class="child4">My content 4</div>
      <div class="child5">My content 5</div>
      <div class="child6">My content 6 (last div)</div>
</div>