响应式布局2,flex,自适应(绝对定位)

先不管具体的，先知道怎么用

模仿下面的代码

 <header>
      <h1>数据可视化-ECharts</h1>
      <div class="showTime"></div>
    </header>

header {
  position: relative;
  height: 1.25rem;
  background: url(../image/head_bg.png) no-repeat;
  background-size: 100% 100%;
  h1 {
    font-size: 0.475rem;
    color: white;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    position: absolute;
    right: 0.375rem;
    line-height: 0.9375rem;
    color: gray;
    font-size: 0.25rem;
    top: 0;
  }
}

这里的top一定要加，应该不加就会造成塌陷。

在不够显示的清空下会自动的对主元素进行压缩。

x轴是主轴，交叉轴就是y轴，设置y轴的方式是上中下。
反之，y轴是主轴，x轴设置对齐方式为左中右。

弹性布局的子元素的大小如果不做额外的设置，会随之弹性改变的。

https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html

https://www.bilibili.com/video/av245018937?p=15&spm_id_from=pageDriver