我正在按照这篇文章
https://css-tricks.com/almanac/properties/w/width/来试图理解这个规则是如何工作的.
我有这个例子：
*{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>
文章说,fit-content可用于将未知宽度的div居中与margin：x auto;
但是如果你在这个例子中更改了max-content的fit-content,那么无论如何这都是有效的,并且它们似乎总是以相同的方式运行.
有谁知道这两条规则之间有什么区别,我应该在哪些情况下使用其中一条规则？
解决方法
正如你在这里看到的那样
https://developer.mozilla.org/en-US/docs/Web/CSS/width最大宽度只是根据孩子们需要的空间来设置尺寸,无论它是否可用,而适合宽度检查孩子们使用最大宽度所需的空间是否可用,如果没有,它使用最小宽度代替.
有关最大宽度和最小宽度之间差异的进一步阅读,请参阅 http://dev.w3.org/csswg/css-sizing/#block-intrinsic.
有关最大宽度和最小宽度之间差异的进一步阅读,请参阅 http://dev.w3.org/csswg/css-sizing/#block-intrinsic.
