* **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的方案
