精通css之路 --- width:auto 里的 width:100%

我一直知道的是，在width:100%时：

• inline-block : 被内容撑开

• block : 充满父盒子

后来在 width:auto 和 width:100% 一起使用时，我发现了一些有趣的问题，我随着我的发现把它们记录了下来

1. 

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

   

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

4. 现在我又发现一个问题，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;
   }