width:auto(父) 里的 width:100%(子)

width:auto 里的 width:100%

首先我知道，对于的width:auto：

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;
}

2.如果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;
 }