* **min-content**：CSS3 中为width 和height 属性定义了一些新的关键字，其中最有用的应该就是min-content 了。这个关键字将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）。
* **垂直居中**：多年以来，垂直居中已经成为了CSS 领域的圣杯，它同样也是前端开
发圈内广为流传的笑话。原因在于它同时具备以下几条特征：
> - 它是极其常见的需求。
> - 从理论上来看，它似乎极其简单。
> - 在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤其如此。
为了解决这一绝世难题，前端开发者们殚精竭虑，琢磨出了各种解决方法：
> - 基于绝对定位的方案：先把这个元素的左上角放置在视口（或最近的、具有定位属性的祖先元素）的正中心，然后再利用负外边距把它向左、向上移动（移动距离相当于它自身宽高的一半），从而把元素的正中心放置在视口的正中心：
`
main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
`
> - 基于视口单位的方案：针对视口居中的场景，可以使用和视口相关的值来进行设置：
`
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
`
> - 基于Flexbox的方案：这是毋庸置疑的最佳解决方案，因为Flexbox 是专门针对这类需求所设计的。还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。
* **紧贴底部的页脚**：让页脚能够紧贴页面底部也是一个非常常见但不是那么容易实现的需求，常见的解决方法有：
> - 固定高度的方案：如果页脚的高度是固定的话，可以通过设置页脚上面的元素的min-height 为视口高度减去页脚的高度来保证页脚能够被撑在页面底部：
`
min-height: calc(100vh - 2.5em - 7em);
/* 避免内边距或边框搞乱高度的计算： */
box-sizing: border-box;
`
> - 基于Flexbox的方案
