width:auto 里的 width:100%

width:auto 里的 width:100%

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

• inline-block : 被内容撑开

• block : 充满父盒子

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

1. 首先是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}

   

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