设定

• 为了描述方面，我们将以 width 举例


• 设定三层元素，他们层层嵌套，分别称作：inner, container, outer。如下所示：
  outer
  
  container
  

  
  inner
  

  
  

  
  
  
  


• 三层元素都有几种情况：
  
  
  
  • 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
  

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 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 相同）