我一直知道的是,在width:100%时:
-
inline-block : 被内容撑开
-
block : 充满父盒子
后来在 width:auto
和 width:100%
一起使用时,我发现了一些有趣的问题,我随着我的发现把它们记录了下来
<div class="out">
<div></div>
<span> 这是一段话这是一段话这是一段话 </span>
</div>
.out {
display: inline-block;
height: 80px;
white-space: nowrap;
background-color: #a0b3d6;
}
.out>div {
width: 228px;
height: 90%;
display: inline-block;
background-color: #c1d5eb;
}
.out>span {
display: inline-block;
width: 100%;
background-color: #34538b;
color: #fff;
}
-
如果
span{width: auto}
-
如果
span
里没有文字会怎么样呢
<div class="out"> <div></div> <span></span> </div> .out { display: inline-block; height: 80px; white-space: nowrap; background-color: #a0b3d6; } .out>div { width: 228px; height: 90%; display: inline-block; background-color: #c1d5eb; } .out>span { display: inline-block; width: 100%; height: 20%; background-color: #34538b; color: #fff; }
-
现在我又发现一个问题,div 和 span之间的空隙是什么呢? 原来这是
空白折叠
现象空白折叠发生在:标准文档流的行内元素之间。
<div></div> <span></span> div { width: 228px; height: 80px; display: inline-block; background-color: #c1d5eb; } span { display: inline-block; width: 100px; height: 80px; background-color: #34538b; color: #fff; }