css不受父控件内边距

对于前端开发人员而言，css是一项不可或缺的技能。然而，在实际开发中，有些css的特性容易被忽略或者不太常见。本文将介绍一种特性：css不受父控件内边距的影响。

先来看一个问题，当一个子元素宽度为100%，但是又存在一个父元素有内边距时，如何去掉内边距对子元素宽度的影响呢？

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

  .parent{
      padding: 10px;
    }
    .child{
      width: 100%; // 子元素宽度为100%
      background-color: #ccc;
    } 

通过上面的代码，我们可以看到在父元素中设置了内边距，并且子元素宽度为100%。我们可以发现，即使将子元素的宽度设置为100%，依然会受到父元素内边距的影响。

那么，如何消除内边距的对子元素宽度的影响呢？在这里，我们有两种方法。

方法一：使用calc()函数

  .child{
      width: calc(100% - 20px); // 子元素宽度为100%减去内边距
    } 

通过在子元素中使用calc()函数，我们可以直接在子元素中计算去掉内边距后的宽度。

方法二：使用box-sizing属性

  .child{
      width: 100%; // 子元素宽度为100%
      background-color: #ccc;
      box-sizing: border-box; // 使子元素包含内边距与边框的尺寸
    } 

通过在子元素中使用box-sizing: border-box属性，我们可以将子元素的宽度设置为包含内边距和边框的总宽度，而不是仅包含内容的宽度。

通过上述两种方法，我们可以在css中消除父元素内边距对子元素宽度的影响，同时实现需要的效果。