几种方法让块级元素默认宽度由子元素决定
2020-03-28 本文已影响0人
qh0814
首先要知道，一个块级元素在默认情况下，宽度为100%，这里的100%是相对于它的父元素。
<body>
<div>block</div>
</body>
块级元素默认情况
那么什么情况下会导致块级元素的默认宽度由子元素决定呢？
1.当块级元素被设置成inline-block
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
<style>
.parent{
display: inline-block;
}
.parent .child{
width:200px;
height: 200px;
background-color: cornflowerblue;
}
</style>
inline-block
可以看到，当块级元素被设置成inline-block时，他的宽度不再是相对于父元素body的100%，而是由子元素的宽度决定。
2.当块级元素浮动时
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent{
float: left;
}
.parent .child{
width:200px;
height: 200px;
background-color: cornflowerblue;
}
</style>
块级元素设置浮动
3.当块级元素设置了绝对定位、固定定位
<body>
<div class="parent-1">
<div class="child"></div>
</div>
<div class="parent-2">
<div class="child"></div>
</div>
</body>
<style>
.parent-1{
position:absolute;
left:100px;
}
.parent-2{
position:fixed;
bottom: 0;
}
.child{
width:200px;
height: 200px;
background-color: cornflowerblue;
}
</style>
absolute、fixed
4.当块级元素设置了display:inline-flex
<body>
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
</body>
<style>
.parent{
display: inline-flex;
}
.child-1{
width:200px;
height: 200px;
background-color: cornflowerblue;
}
.child-2{
width:200px;
height: 200px;
background-color:forestgreen;
}
</style>
inline-flex
注意：这几种方法是让子元素决定父元素的默认宽度，也就是说你仍然还可以给这个元素显式地添加width的样式，添加width后元素的宽度还是会根据你添加的样式为主。
纠正一些观点：
某些其他的博文里会认为：添加绝对定位、固定定位后会让flex布局“失效”。这种说法实际上是不严谨的，当一个元素同时设置display:flex以及position:fixed/absolute的时候，之所以会出现布局和预期不一样是因为绝对定位或固定定位会影响块级元素的默认宽度，从而影响了flex容器里项目的布局。
证明：
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
<style>
.parent{
display: flex;
justify-content:space-between;
/* position: absolute; */
}
.parent div{
background-color: lightseagreen;
flex:1;
text-align: center;
border: 1px solid #333;
}
</style>
以上是一个简单的flex布局，parent被设置为flex容器，里面有4个项目，项目在主轴上以space-between的方式排列。显示效果如下：
flex布局 容器不进行定位
当容器只被设置为flex的时候没有什么问题，但是如果加上position:absolute时：
flex容器被绝对定位
当flex容器被绝对定位后，宽度由子元素决定，parent的宽度由里面4个div决定，所以变成了一个很小的单位。从视觉上看，flex项目像是被“折叠”了。但你要知道，这并不是绝对定位影响了flex布局，flex布局仍然是生效的，更准确的原因是绝对定位影响了flex容器的默认宽度。
为了使布局恢复正常，只要让容器宽度变回原来的宽度就行了，parent容器样式改成：
.parent{
display: flex;
justify-content:space-between;
position: absolute;
width:100%;
}
布局恢复正常
梳理一下：
这里.parent的父元素是body，所以.parent的默认宽度是相对于body的100%，哪怕被设置成flex容器也是100%，直到.parent被绝对定位，他的宽度由子元素决定变成了一个很小的值，然后原本想要的flex布局被打乱，由于打乱布局的原因是宽度，所以我们添加width:100%变回原来的宽度，从而让布局恢复正常。添加的width要根据实际情况而定。
总结：
1.块级元素的默认宽度是相对父元素的100%，表现形式为“独占一行”。
2.当块级元素遇到以上几种情况时，默认宽度由子元素决定。
3.flex布局并不和绝对/固定定位相冲突，flex布局只是一种弹性布局方式，它仍然要受到元素的宽度、高度等属性的影响，而绝对/固定定位就是影响元素(flex容器)默认宽度的因素之一。
