CSS width100%与widthauto的区别

16 min read

先上代码

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .parent {
      width: 800px;
      margin: 50px auto;
      border: 2px solid red;
    }
    .child1 {
      background: orange;
    }
    .child2 {
      width: 100%;
      background: blue;
    }
    .child3 {
      width: auto;
      background: green;
    }
</style>
<body>
  <div class="parent">
    <div class="child1">看看我的宽度</div>
    <div class="child2">看看我的宽度</div>
    <div class="child3">看看我的宽度</div>
  </div>
</body>

可以看到，元素在不设置padidng和margin的情况下，width:100%和width:auto表现一样，都是继承自父级的宽度。元素的默认宽度是 width:auto。
但是，设置了padding和margin后，表现则大不相同：

    .child2 {
      width: 100%;
      margin-left: 100px;
      padding-left: 100px;
      background: blue;
    }
    .child3 {
      width: auto;
      margin-left: 100px;
      padding-left: 100px;
      background: green;
    }

可以看出child2溢出父元素，child3则没有。原因是什么呢？

因为二者的宽度是计算方式不同：

width: auto= 'width' + 'padding-left/right' +'border-left/right' + (margin-left/right) ;

所以就不用担心当元素自身有margin、padding 、border 时，宽度会超过父节点。

width:100%='父元素width' + 'padding-left/right' + 'border-left/right' + (margin-left/right);

这样就会发生内容溢出父节点的情况，会产生不良的影响。