设定

为了描述方面    
    
    
    
，我们将以 width 举例 设定三层元素  


     


     


     


 ，他们层层嵌套


 




 




 




 ，分别称作：inner, container, outer 
    
    
    
 。如下所示：

outer 三层元素都有几种情况： outer 有限制 例如   

   

   

   

，设置了 width 或 max-width 为固定值 无限制

例如   

     

     

     

，将 width 设置为根据内容变化的值



  




  




  




  ，且长度可以无限增加 container

fit-content, min-content, max-content, fill-available 四种
     


     


     


     。其中 fit-content, min-content, max-content 为 width, height 等 CSS 属性的可选值  


  


  


  

，fill-available 是指 width, height 等为 auto 时的表现 




 




 




 




。 inner 固定宽度 设置了固定的 width 文本 该层为可换行的文本    
     
     
     
，其宽度可长可短 

   

   

   

。 随父元素变化 例如 width 为 100% 文中会出现 inner + container < outer 这种类似表达式的表述方式
     

     

     

     。这里 inner 指其包括 margin 在内的总宽度；container 指其 padding + border + margin 的宽度




   




   




   




  ，不含 width；outer 在有限制时 



 



 



 

，指其达到限制时 width 的宽度                    ，在无限制时




    




    




    




  ，表示无限大  




  




  




  



。

fit-content, min-content, max-content

首先

















，当 container 设置为这三个值时                    ，不管其他情况如何变化 



     



     



     



  ，其宽度始终贴合 inner

















，即使 inner + container 的宽度超出了 outer 的限制也是如此（超出时    
    
    
    
，网页的表现由 overflow 属性决定） 


  


  


  


。三者的不同体现在对 inner 宽度的影响上  


     


     


     


 ，下面对此分类讨论
     
     
     
    。

inner 为固定宽度 此时三个属性表现完全相同


 




 




 




 ，inner 为其设定宽度 inner 随父元素变化 此时三个属性表现完全相同   




   




   




   


。 inner 为其最小宽度   

   

   

   

，即：若 min-width 为固定值   

     

     

     

，则 inner 宽度为该值；否则



  




  




  




  ，inner 宽度为 0 inner 为可换行文本 min-content inner 为文本最小宽度（尽可能换行） max-content inner 为文本最大宽度（完全不换行） fit-content 在不超出 outer 的情况下  


  


  


  

，inner 尽可能宽 



 



 



 



。而如果 inner 为文本最小宽度时也超出了 outer    
     
     
     
，那 inner 就是文本最小宽度                  。更明确的表述如下： if (文本最大宽度 + container < outer) { inner = 文本最大宽度 } else if (文本最小宽度 + container > outer) { inner = 文本最小宽度 } else { inner = outer - container }

fill-available

outer 为固定宽度 container 贴合 outer 内部




   




   




   




  ，inner 可能超出 container 否则 



 



 



 

，inner 和 container 的表现与 max-content 相同（此时 fit-content 的表现也与 max-content 相同）