样式问题处理汇总（持续迭代，欢迎拍砖）

背景

处理样式问题记录

具体实践

<!-- 引入外部的小图标 ，type也可以image/jpg(png、[svg]) -->
<link rel="icon" type="image/x-icon" href="./logo.png"/>

<!-- 行内标签水平垂直局中 -->
.container {
    display: flex; 
    height: 30px;
    line-height: 30px;
    i, span {
      display: inline-block;
    }
}

<div class="container">
    <i></i>
    <span>AAAAAAA</span>
</div>

<!-- 设置100% overflow出现滚动条 -->
<div class="main-container scroll"></div>
<!-- 默认自适应高宽 -->
.main-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  &.scroll {
    <!-- 设置滚动条 -->
    position: absolute;
    width: calc(100% - 232px);
    overflow-y: scroll;
  }
}