上一章总结

在第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是块级元素，所以容器最大宽度就是图片的宽度