width=100%与width=auto

最近在学习前端的一些基本知识，今天碰到了一个问题，关于width的问题

首先是width=100%:

当width=100%时，

子元素的宽度是继承的父元素宽度，不包括子元素设置的margin padding 和border部分

css样式：

   
   

     
     

      
      

     
     
     
     

      
      

       
       .main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px;}
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       .right{
       
       background:green;
       
       height:
       
       40px;
       
       width:
       
       100%; }
      
      
     
     
   
   

html：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <div class="main">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div class="right">right
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </div>
      
      
     
     
   
   

main的width为700px，left的width为100px。如果right的width设置为100%，那right的width=700px（等于父级元素的宽度)，

此时如果left设置padding值的话例如padding-left：100px；会变成下面这样：

css样式：

   
   

     
     

      
      

     
     
     
     

      
      

       
       .main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px;}
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       .right{
       
       background:green;
       
       height:
       
       40px;
       
       width:
       
       100%; 
       
       padding-left：100px}
      
      
     
     
   
   

会发现right部分溢出main,我个人认为此时right产生了一个新的width值800px，700+100=800px；至于如果子元素添加margin或者border等属性时right的width值会怎么变化后面再讨论；

当width=auto时，

父元素的width=子元素的width+子元素border+子元素margin+子元素padding

css样式：

   
   

     
     

      
      

     
     
     
     

      
      

       
       .main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px;}
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       .right{
       
       background:green;
       
       height:
       
       40px;
       
       width:auto; }
      
      
     
     
   
   

html：

   
   

     
     

      
      

     
     
     
     

      
      

       
       <div class="main">
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       <div class="right">right
       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </div>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

     
     
   
   

子元素right此时没有设置其他属性，所以width=700px；

如果right设置一个margin-left：100px；

css样式：

   
   

     
     

      
      

     
     
     
     

      
      

       
       .main{background:red;height:40px;width:700px;font-size:30px; color:#fff;height:80px;}
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       .right{
       
       background:green;
       
       height:
       
       40px;
       
       width:auto; 
       
       margin-left:
       
       100px;}
      
      
     
     
   
   

< style="font-size:16px;">会发现right的width变成了600px，减去了外边距的值；当设置margin或者border属性时right的width会怎么变化后面再讨论。

转载自https://blog.csdn.net/young_bird_1996/article/details/79449462