内层DIV如何强制做到宽度100%

Question

<div style="padding:0 10px;">
<div>22222</div>
</div>

我想让中间的这个DIV宽度达到100%，不受到上层DIV中padding影响

Answer 1

margin：0 -10px

Answer 2

• 方案一：浏览器有两种盒子模型，使用style.boxSizing属性控制，当属性值为content-box的时候，width:100%会连父元素的padding和border算进去，就能达到你说的效果了（前提是border宽度为0）。
  缺陷就是子元素会溢出，不过可以用负的left或margin-left来抵消——前提是知道需要抵消多少。
• 方案二：父元素position:relative（或absolute），子元素position:absolue;inset:0，这个可以完美抵消padding，不受border影响。
  缺陷就是子元素高度跟父元素完全一致，无法由内容撑开。