[JavaScript知识库]分享一个好用的CSS布局

事情起因

之前参与了一个数据可视化看板的项目，刚开始甲方给的页面只是一个概念图，就是大概描述了屏幕上分几块，每一块放什么图表之类的，虽然很无语，但还是要继续开发挣饭吃。开发完毕之后，甲方才把UI设计图给过来，让做页面效果，统一颜色风格啥的，在修改的时候，发现了这个问题。

代码的模板是在网上开源库里找的，echarts图表组件有个resize事件,可以重置图片组件的宽高。同时配合事件监听器对resize事件的监听，可以实现效果。大致代码如下：

data() {
    return {
       chartInstance: null, 
    }
}，
mounted(){
    this.initChart();
    window.addEventListener("resize",this.screenAdapter);
    // 组件加载时执行一次
    this.screenAdapter();
}
methods:{
    initChart(){
        this.chartInstance = this.$echarts.init(this.$refs.xxx);
        ...
        this.chartInstance.setOption(xxx)
    },
    screenAdapter(){
        this.chartInstance.resize();
    }
}

代码是美好的，但结果是残忍的。图表的内容显示到了区块标题的下面！！！

搞得也是十分头疼，各种百度查找之后，在Echarts的文档里找到了原因。

echarts实例的resize方法参数为缺省值，包含width、height、slient、animation等四个可选项。而在width、height传入的值为null/undefined/'auto’时，表示为自动获取图表组件容器的宽高。

所以图表占据了整个区块的宽高，导致区块标题的内容显示到了图表区域内。问题是找到了，但是又该如何解决呢？
思考了好久，搜索了好久，才发现一个适用的布局方法；

• 给父容器(区块div)设置宽度为100%，高度为100%；并且设置IE盒模型，width = content+padding+border的那种，目的是为在父容器中给标题让位置时候不至于撑开高度；设置padding-top的值为标题高度，并且设置position为relative。

• 设置标题部分，首先是设置标题高度，必须与父容器的padding-top的值保持一致，宽度为100%；同时要设置绝对定位，left为0，top为0，使得标题部分上移。

• 设置图表组件容器，这里就比较简单了，设置宽高为100%即可。也可设置margin-top值与顶部拉开一点距离。

代码结构如下：

<div id="left-top" class="screen-box">
  <!-- 样本统计 -->
  <div class="box-title">标题</div>
  <div class="box-wrapper">
    <Echarts />
  </div>
</div>

.screen-box {
  width: 100%;
  height: 100%;
  padding: 25px 0 0 0;
  color: #fff;
  box-sizing: border-box;
  position: relative;
  .box-title {
    font-size: 14px;
    height: 25px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }
  .box-wrapper {
    width: 100%;
    height: 100%;
    margin-top: 10px;
  }
}

布局的分享就到这里结束了。
但是还有一个东西是要分享的。图表组件的周围一般都会有一个边框，有的使用背景图片，有的则使用css实现，下面要分享的就是使用css实现的一个边框。

<div id="left-top" class="screen-box">
  <!-- 样本统计 -->
  <div class="box-title">标题</div>
  <div class="box-wrapper">
    <Echarts />
    <div class="wrapper-foot"></div>
  </div>
</div>

// 其他内容同上
.box-wrapper {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    box-shadow: inset 0 0 30px #07417a;
    position: relative;
    .wrapper-foot {
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
    }
    &::before,
    &::after,
    .wrapper-foot::before,
    .wrapper-foot::after {
      position: absolute;
      width: 0.2rem;
      height: 0.2rem;
      content: "";
    }
    &::before,
    &::after {
      border-top: 2px solid #02a6b5;
      top: 0;
    }
    .wrapper-foot::before,
    .wrapper-foot::after {
      border-bottom: 2px solid #02a6b5;
      bottom: 0;
    }
    &::before,
    .wrapper-foot::before {
      border-left: 2px solid #02a6b5;
      left: 0;
    }
    &::after,
    .wrapper-foot::after {
      border-right: 2px solid #02a6b5;
      right: 0;
    }
  }