Page 205 - css揭秘

有没有一种合适的 CSS 技巧可以解决这个问题？我们是不是应该放弃
这条路，改用脚本来动态地为每个 figure 设置宽度？

解决方案

CSS 内部与外部尺寸模型（第三版）（http://w3.org/TR/css3-sizing）是
图 7-3 一个相对较新的规范，它为 width 和 height 属性定义了一些新的关键字，
与我 们的期 望相反，display: 其中最有用的应该就是 min-content 了。这个关键字将解析为这个容器内
inline-block 并不会产生我们想 部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元
要的宽度
1①
素） 。这正是我们梦寐以求的！现在，使用以下两行简单的 CSS 代码就可以
把 figure 设置为恰当的宽度，并让它水平居中：
figure {
width: min-content;
margin: auto;
}

你可以在图 7-4 中看到效果。为了给那些旧版浏览器提供一个平稳的回
退样式，我们需要在使用这个技巧的同时，提供一个固定的 max-width 值，
比如：

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

figure > img { max-width: inherit; }
图 7-4
对于现代浏览器来说，后一条 max-width 声明会覆盖前一条。如果
最终效果
figure 的尺寸是由内部因素决定时，第二条规则中的 max-width: inherit
就不会生效了。

试一试 play.csssecrets.io/intrinsic-sizing

向 Dudley Storey（http://demosthenes.info）脱帽致敬，感谢他提出这个
应 用 场 景（http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-
CSS-MinContent）。

致 敬
„ CSS 内部与外部尺寸模型
http://w3.org/TR/css3-sizing 相关规范

① 其他的值还有 max-content，它的行为类似于我们在前面看到的 display: inline-
block；而 fit-content 的行为与浮动元素是相同的（和 min-content 的效果通常一致，
但也有例外）。

174 第 7 章 结构与布局

඀ࠡ JOEC