CSS布局

参考

https://www.zhihu.com/question/66167982/answer/1160351616

CSS布局：http://zh.learnlayout.com/toc.html

彻底理解CSS Flexbox布局，看这一篇就够了！ - 掘金 (juejin.cn)

块级元素——block

div p h1-h6 form header footer section

行内元素——inline

span a

position

static|fixed|reletive|absolute

1. 默认情况下，元素的定位方式为静态（static），即元素按照正常的文档流进行排列
2. 相对定位（relative positioning）：相对于当前元素的位置进行定位。通过设置元素的 position 属性为 relative，可以使元素相对于其正常位置进行偏移
3. 绝对定位（absolute positioning）：相对于最近的已定位祖先元素（如设置了 position 属性的元素）进行定位。如果没有已定位的祖先元素，则相对于初始包含块（即视口）进行定位。通过设置元素的 position 属性为 absolute，可以使元素脱离正常文档流，并相对于指定祖先元素进行定位
4. fixed定位方式是一种相对于浏览器窗口进行定位的方式，即使页面滚动，该元素也会固定在相同的位置

使用 Flexbox 的居中布局

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}