CSS fit-content和max-content有什麼區別？

我正在關注這篇文章https://css-tricks.com/almanac/properties/w/width/，試圖瞭解這個規則是如何工作的。CSS fit-content和max-content有什麼區別？

我有這樣的例子：

*{margin:0; padding:0} 
 
.box{ 
 
    background: lightgreen; 
 
    margin: 0 auto; 
 
    width: -webkit-fit-content; 
 
    width: -moz-fit-content; 
 
    width: fit-content; 
 
}

<div class="box"> 
 
    <img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" /> 
 
    <figure>Yes, put some text here that is wider than the image above to try some new rules</figure> 
 
</div>

文章說，裝修的內容可用於中心未知寬度的一個div margin: x auto;

，但如果更改適合 - 在這個例子中最大內容的內容，無論如何這是工作，他們似乎總是以相同的方式行事。

有人知道這兩個規則有什麼區別，在哪些情況下我應該使用其中一種？

來源

2015-06-08 Vandervals

經過19年的前端開發，我不知道這些。感謝提高認識！ – connexo

雖然http://caniuse.com/#feat=intrinsic-width尚未得到很好的支持 – Aaron

正如你可以在這裏看到的https://developer.mozilla.org/en-US/docs/Web/CSS/width max-width只是簡單地根據孩子需要的空間來設置大小，而不管它是否可用，而合適寬度檢查孩子需要使用最大寬度的空間是可用，如果沒有，它使用最小寬度來代替。有關最大寬度和最小寬度之間差異的更多信息，請參閱http://dev.w3.org/csswg/css-sizing/#block-intrinsic。

來源

2015-06-08 08:33:46

裝修內容使用最高含量，除非available < max-content，那麼它使用可用。除非available < min-content，那麼它使用最小內容。

來源

2017-08-31 02:38:12 jiggunjer

max-content和fit-content的行爲不一樣的一種情況是，當您在元素上設置'max-width'屬性，並且視口大小比max-寬度值。在這種情況下，'max-content'值將產生一個佈局，在該佈局中文本將被任意切割（並且唯一的方法是查看整個文本將水平滾動）。另一方面，使用'fit-content'值會忽略最大寬度屬性並在視口內很好地調整文本。

來源

2018-02-04 08:35:03 shayuna

CSS fit-content和max-content有什麼區別？

回答

相關問題