Width :auto(parent) width:100%(child)

Width: the width in the auto: 100%

First of all, I know that for width:auto:

• Inline-block: is braced by the content
• Block: fills the parent box

Later, when using width: Auto with width:100%, I found some interesting problems, and I wrote them down along with my findings

1. 

   <div class="out">
     <div></div>
     <span< p style = "max-width: 100%; clear: both; min-height: 1emspan>
   </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;
   }
   Copy the code

Span {width: auto}

3. What if there were no words in 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;
   }
   Copy the code

4. Now I have another problem, what is the space between div and span? It turns out that this is whitespace folding: whitespace folding occurs between inline elements of a standard document flow.

<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;
 }
Copy the code