今日前端小知识—— width:auto 与 width:100% 的区别

前段时间做页面的时候，发现给盒子设置 width:100% 和 auto 的效果不一样，这里来探讨一下。

<style>
  .main {
    width: 300px;
    height: auto;
    padding: 20px;
    background-color: brown;
    color: seashell;
  }
  .box1 {
    width: 100%;
    background-color: chocolate;
  }
  .box2{
    width: auto;
    background-color: blueviolet;
  }
style>

<div class="main">
  <div class="box1">100%div>
  <div class="box2">autodiv>
div>

在不设置 border、padding、margin （都为0）时，这两者表现效果是一样的，如下图所示

这是在标准盒模型的情况下

元素 width = content

此时父盒子 content 宽度 = width = 300px。接下来给两个子盒子设置一下 border、padding、margin，看看效果如何

<style>
.box1,.box2{
  border: 10px solid burlywood;
  padding: 10px;
  margin: 10px;
}
style>

可以看到 width:100% 的盒子超出了父盒子的内容区域，但是 width:auto 的盒子仍然在父盒子的内容区域之内，在浏览器看一下两个盒子的计算样式，如下图所示

100% 盒子的 width = 300px = 父盒子的 width
auto 盒子的 width + padding + border + margin = 240+10*2+10*2+10*2 = 父盒子的 width

在怪异盒模型中又会是怎样的呢？

<style>
div {
  box-sizing: border-box;
}
style>

元素 width = content + padding + border

此时父盒子 content 宽度 = width - padding - border = (300 - 20*2) px = 260px，效果如下图所示

100% 盒子的 width = 220+10*2+10*2 = 260px = 父盒子的 content 宽度
auto 盒子的 width + margin = (200+10*2+10*2)+10*2 = 260px = 父盒子的 content 宽度

总结

无论是 width: 100% 还是 width: auto，都是相对于父元素的 content 宽度来计算的，区别就在于：

width:100% 的元素， width 与父元素的 content 宽度相等
width:auto 的元素，总宽度与父元素的 content 宽度相等

width 属性的默认值就是 auto，无论元素本身的 padding、border 或 margin 是否为 0，都不会溢出父元素，而在取值为 100% 时需要注意元素内容溢出父元素的情况。设置 box-sizing: border-box，能在一定程度上避免内容溢出的情况发生。