💪第6期第7题:块状元素width:100%与width:auto的区别?
Opened this issue · 0 comments
LinDaiDai commented
块状元素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
的时候,容易使其突破父级框,破坏布局。