css学习笔记：width:100%与width:auto区别

今天学习(摸鱼)的时候突然发现width:100%和width:auto效果不一样，于是自己研究了一下

  <div class="parBox">
    <div class="box1">100%</div>
    <div class="box2">auto</div>
  </div>

首先在不设置任何其他因素的情况下

 .parBox {
     width: 600px;
     background: rgb(170, 175, 184);
     padding: 10px;
     color: white; }
 .box1 {
     width: 100%;
     height: 100px;
     background: rebeccapurple;
     color: white;
 }
 .box2 {
     width: auto;
     height: 100px;
     background: rgb(0, 98, 255);
 }

感觉没什么不一样

    .box1 {
      width: 100%;
      height: 100px;
      background: rebeccapurple;
      border: 5px solid #000;
    }
    .box2 {
      width: auto;
      height: 100px;
      background: rgb(0, 98, 255);
      border: 5px solid rgb(202, 37, 37);
    }

然后给子节点都添加上border

这就复现开始发现的问题，然后发现好像box1的宽度刚好多过box2两倍边框宽度

好的，确实印证了我的猜想,设置100%的盒子只有content的宽度等于父节点的宽度，而设置auto的是content+border等于父节点宽度

然后再来给子节点添加padding

    .box1 {
      width: 100%;
      height: 100px;
      background: rebeccapurple;
      border: 1px solid #000;
      padding: 10px;
    }
    .box2 {
      width: auto;
      height: 100px;
      background: rgb(0, 98, 255);
      border: 1px solid rgb(202, 37, 37);
      padding: 10px;
    }

100%的已经超出父节点的范围了

和设置border表现一样，然后再来给子节点添加margin

    .box1 {
      width: 100%;
      height: 100px;
      background: rebeccapurple;
      border: 1px solid #000;
      margin: 10px;
    }
    .box2 {
      width: auto;
      height: 100px;
      background: rgb(0, 98, 255);
      border: 1px solid rgb(202, 37, 37);
      margin: 10px;
    }

可以发现，添加margin、padding的时候表现和添加border表现是一样的

由此可以得到

width设置100%时：父节点宽度 = 子节点content宽度
width设置auto时：父节点宽度 = 子节点content+padding+margin+border宽度