CSS揭秘--笔记--自适应内部元素

结构代码如下

<p>some text.....</p>
<figure>
   <img src="***.jpg"/>
   <figcaption>
   there have some text....
   </figcaption>
</figure>
<p>some text...</p>

CSS内部与外部尺寸模型是一个较新的规范,它为width和height属性定义了一些新的关键字，例如我们这里使用的min-content.这个关键字将解析为这个容器内部最大不可断行元素的宽度（css魔法翻译为最大，我觉得是最小的不可断行的元素宽度。）
规范原文
min-content size
The smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size. (See §4 Intrinsic Size Determination.)

min-content inline size
The narrowest inline size a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger inline size. Roughly, the inline size that would fit around its contents if all soft wrap opportunities within the box were taken.

现在使用两行简单的css代码就可以吧figure设置为恰当的宽度，并让他水平居中

figure{
width:min-content;
margin:auto;
}

demo在下面网址
play.csssecrets.io/intrinsic-sizing

为了给旧版本提供一个平稳的回退样式，我们可以在使用这个技巧的同事，提供一个固定的max-width值

figure{
max-width:300px;
max-width:min-content;
margin:auto;
}
figure > img{
max-width:inherit;
}

当浏览器支持min-content时，后一条的max-width声明会覆盖前一条，如果figure的尺寸是由内部因素决定时，第二条规则中的max-width:inherit就不会生效了。