💪第6期第7题：块状元素width:100%与width:auto的区别?

[LinDaiDai]

块状元素width:100%与width:auto的区别?

这两个属性值相信大家都不陌生了，先让我们来看个案例理解一下：

html代码：

<div class="super">
  <div class="sub1">
    我是呆呆的第一个崽
  </div>
  <div class="sub2">
    我是呆呆的第二个崽
  </div>
  <div class="sub3">
    我是呆呆的第三个崽
  </div>
</div>

css代码:

.super {
  width: 200px;
  height: 100px;
  background: skyblue;
}
.sub1 {
  background: #d0e4a9;
}
.sub2 {
  width: 100%;
  background: #c077af;
}
.sub3 {
  width: auto;
  background: #f8d29d;
}

最开始时，三个崽表现的效果是一样的，并无很大差别：

此时如果我们对后面两个崽做一下改动：

.sub2 {
  width: 100%;
  padding-left: 10px;
  margin-left: 10px;
  background: #c077af;
}
.sub3 {
  width: auto;
  padding-left: 10px;
  margin-left: 10px;
  background: #f8d29d;
}

给他们都加上左内边距和左外边距，此时的效果就变成了这样：

大家会发现，设置了width: 100%的崽，它的宽度会和父级的一样，此时如果再给他设置了额外的padding，那它就会比父级还要宽了，也就是会超出父级容器。而因为还设置了margin-left，所以左边也会有一段距离。

但是设置了width: auto的崽就比较乖了，无论怎样它都不会超出父级，而是选择压缩自己的宽度。

因此我们可以得出结论：

• 两者的计算方式不同(这里的计算规则都是基于box-sizing: content-box;的情况)：
  • 对于width: auto;它的总宽度是等于父宽度的(这里的父宽度是指父级内容的宽度不包括padding、border、margin)，即使给元素设置了padding、border、margin等属性，它也会自动分配水平空间。
  • 对于width: 100%;它表示的是元素内容的宽度等于父宽度，所以它的总宽度是有可能超过父级的，因为如果设置了额外的padding、border，就可能比父级宽了。
• 无论是width:100%还是auto，其计算的参照都是父级内容区width值，而非总宽度值，也就是不包括padding、border、margin。
• 一般width:auto使用的多一些，因为这样灵活；而width:100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破坏布局。