问题背景与盒模型要点
在前端布局中，父级容器如果设置了内边距，会在内容区域之外增加留白。这时子级DIV的宽度计算会受到影响，尤其是当你希望子元素达到100%宽度时，容易出现与父容器边界错位的情况。理解盒模型中的内容区域与内边距的关系，是实现全宽效果的前提。
通常情况下，子元素的width: 100%是相对于父元素的内容区域宽度进行计算的，而不是包含内边距后的外边界宽度。这就导致在父元素有内边距时，子元素看起来没有横向“蔓延”到父边界。对于这种需求，需通过一些布局技巧来抵消内边距的影响，确保子级DIV呈现出真正的全宽效果。下面将围绕三种常用做法展开说明。
在本文中，你将看到实际可落地的实现方式，并附带示例代码，方便你在实际项目中直接复用。关键点在于让子元素的实际渲染宽度达到父元素的外边界宽度，同时保持版本兼容性和响应式能力。
解决方案与实现思路
方案一：使用 calc 搭配负外边距实现全宽
核心思路是让子元素的实际宽度变成父容器外边界宽度，并通过负外边距抵消内边距带来的影响。通过计算宽度为100%再加上左右撑开的距离，并将子元素向左向右拉出等价的内边距空间，可以实现“全宽”效果。
该方案的实现简单直观，兼容性也较好，适用于大多数常见布局场景。
实现要点包括：父容器设定固定的内边距值，子容器宽度使用 calc(100% + 2 * 内边距)，左右各自应用负边距以抵消内边距。注意要确保子元素在父容器内正确换行与溢出处理。
/* 方案一：calc + 负外边距实现全宽 */
.parent { padding: 20px; border: 1px solid #ddd; }
.child { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; background: #eaf0f8; }兼容性提示：现代浏览器均支持 calc 与负外边距，但在极早期的浏览器中可能需要回退方案或添加前缀。在响应式布局中，请注意不同断点下的内边距自适应。
方案二：通过绝对定位和负边距实现全宽效果
另一种思路是将子元素设置为绝对定位，并通过左右偏移来覆盖父容器的内边距区域，使其宽度达到父容器的外边界。该 approach 在需要覆盖父容器不同高度或弹性高度时尤为有效。
实现要点是：父容器设置 position: relative; 子元素设为 position: absolute; 左右各自设置等价于内边距的负偏移值，同时宽度通过 calc 或直接伸展达到外边界宽度。这种做法需要确保父容器高度能够自适应或明确高度。
/* 方案二：绝对定位 + 负偏移实现全宽 */
.parent { padding: 20px; position: relative; }
.child { position: absolute; left: -20px; right: -20px; width: calc(100% + 40px); background: #fdebdc; }使用场景与注意点：适用于需要子元素覆盖父容器内边距区域的场景；请确保父容器的高度通过文档流或其他元素正确撑起，避免出现覆盖区域导致的布局错乱。
方案三：利用 CSS 变量与盒模型技巧实现自适应全宽
通过把内边距设为可配置的 CSS 变量，并让子元素宽度以 calc 动态计算，可以在不同分辨率下保持一致的全宽效果。使用变量的好处在于维护与调试更加方便，且便于跨组件复用。
实现要点是：把父容器的内边距定义为一个 CSS 变量，例如 --pad，然后让子元素宽度变为 calc(100% + 2 * var(--pad))，并使用 margin-left/margin-right 负向偏移来抵消内边距。变量化后在不同断点下可以快速调整。
:root { --pad: 20px; }
.parent.var { padding: var(--pad); }
.parent.var .child { width: calc(100% + (var(--pad) * 2)); margin: 0 calc(-1 * var(--pad)); }灵活性与可维护性：通过 CSS 变量，实现全局统一的内边距控制，适合大型项目的统一风格与响应式设计。
实操案例：完整代码演示
以下示例汇总展示三种方案的对应实现，便于你在实际项目中对照使用。请结合实际页面结构选择最合适的方案。
全宽子元素示例
方案一：calc + -20px 左右负边距的全宽子级 方案二：绝对定位实现全宽 方案三：CSS 变量实现自适应全宽
/* 方案一：calc + 负边距实现全宽 - CSS 仅示例 */
.box1 .parent { padding: 20px; border: 1px solid #ccc; }
.box1 .child { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }/* 方案二：绝对定位 + 负边距实现全宽 - CSS 仅示例 */
.box2 .parent { padding: 20px; border: 1px solid #ccc; position: relative; }
.box2 .child { position: absolute; left: -20px; right: -20px; width: calc(100% + 40px); }/* 方案三：CSS 变量实现自适应全宽 - CSS 仅示例 */
:root { --pad: 20px; }
.box3 .parent { padding: var(--pad); border: 1px solid #ccc; }
.box3 .child { width: calc(100% + (var(--pad) * 2)); margin: 0 calc(-1 * var(--pad)); }
<div class="parent" style="padding:20px;"><div class="child">示例文本</div>
</div>