在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。
头部使用 position: sticky; 吸顶，再使用盒子（main）来包住内容（container > content）和底部（footer），这个盒子设置最小高度为除头部外的剩余屏幕高度：min-height: calc(100vh - 50px);，盒子里面使用弹性布局（flex: 1 1 auto;）让内容区域自动撑开，而底部保持不变（flex: 0 0 auto;），这样就有了内容不够时底部自动吸底，内容足够时底部自动下移的效果。
"CSS 实现内容高度不够的时候底部（footer）自动贴底"继续阅读
husky + lint-staged + prettier + eslint + commitlintgit commit, git push。"通过 eslint stylelint htmllint 规范前端项目代码"继续阅读
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
设置 box-sizing: border-box; 后，简言之：
"设置 box-sizing 为 border-box 后外边距（margin）会合并吗"继续阅读
"CSS3 Flex布局（容器）"继续阅读
"CSS3边框border-radius"继续阅读
"CSS3选择器:nth-child与:nth-of-type区别"继续阅读