上一章总结
在第6章，我跳过了最后两章的内容。其原因是，我觉得不太实用。后两章的内容分别为 滚动提示 ** 互动式图片比较**，这里的使用者体验更像是一些小部件（用于增加创意）。
我是说，它更像你看到的一个酷炫的效果，但绝非适合任何网页。我打算，当我真正需要它的时候，我会拾起它。
前言
那么，进入第七章 -- 架构与版型。这一张可能是最重要的，也是经常遇到的 ，比如 垂直居中和页尾固定，这些烦恼的问题在这一章会给出很多解决办法。
正文
在第一小节我们将学习的是固有尺寸
1.抛出问题，什么是固有尺寸啊？我不懂
固有尺寸 -- 在这里指元素（图片或div）原有的内容大小
2.我们要做什么？
我们都知道，如果不指定一个元素的height，那它的高度会自动跟着内容调整，我们希望width也有类似的行为
我们想实现以下的效果
固有尺寸
这里整个容器宽度取决于内容（图片）的最小宽度
小测试
html
<figure>
<img src="doge.png"/>
<figcaption>I used to love skateboarding, but only as a hobby.I used to love skateboarding, but only as a hobby.I used to love skateboarding, but only as a hobby. </figcaption>
</figure>
css
figure{
border: 1px solid silver;
padding: 2em;
/*max-width: 400px;*/
max-width: min-content;
margin: 0;
}
我们来看这里最重要的一句max-width：min-content
将容器最大的宽度设置为内容的最小宽度
这里figcaption是块级元素，所以容器最大宽度就是图片的宽度
