先给出结论：当父级盒子中只有一个子级盒子并且设置了高度时，子盒子的宽度为父亲的宽度。但是当子级盒子为多个存在在父级盒子当中，那么子级盒子会根据盒子中如字数这种元素来扩充盒子。
下面演示一下意思，方便理解。其中为了让块级元素一行显示，运用到了浮动的相关知识。
<body>
<div class="father">
<div class="son"></div>
</div>
</body>先给出父级块的css
.father {
height: 70px;
background-color: red;
}其效果是 填满了整个屏幕的宽度
现在在这个父级盒子添加一个子级的元素 只规定高度 给他设置为蓝色
.son {
height: 60px;
background-color: aqua;
float: left;
}为 方便观察 给出高度60px 但是不给出其宽度 发现在
其自动的把宽度 扩充满整个的父级元素
那么 如果里面是两个块级元素 设置其为行内块元素呢 难道会评分一半 一半的宽度嘛？
<body>
<div class="father">
<div class="son"></div>
<div class="son"></div>
</div>
</body>
.father {
height: 70px;
background-color: red;
}
.son {
height: 60px;
background-color: aqua;
display: inline-block;
}给出效果图 发现子级的方块不再显示了
然后我们在子集盒子里面添加文字试试
可以发现 在子级别存在多个元素时候 该盒子的宽度由盒子里面的内容做决定哦
扫一扫
2020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
