一个方法解决前端开发中出现元素间有间隙的问题

前言

通常我们在写样式时，父子元素之间在没有加特别的样式时都会出现两者之间有一条间隙的问题，这种情况在两者height属性使用了单数时会经常出现。如果是移动端，由于设备的多样化，指不定在哪到设备会出现。

用CSS3的flex布局就很容易解决这个问题。

注：这里所说的元素间间隙不是特指常见的图片回车后所形成的间隙，但是图片形成的这种间隙也同样可以用本方法处理。

下面以我在开发中遇到的一个例子，写一个简单的解决方法。

实践

元素HTML

    <div class="time-box">
        <div class="time-top" />
        <span class="time-value"
        >{{ h }}:&nbsp;&nbsp;{{ m }}:&nbsp;&nbsp;{{
            s
        }}&nbsp;&nbsp;后邀请将失效</span
        >
    </div>

样式

  .time-top{
    border-top: 0.064054rem solid #fff2e9;
  }
  .time-value {
    height: 0.533333rem /* 20/37.5 */;
    line-height: 0.533333rem /* 20/37.5 */;
    width: 4.346667rem /* 163/37.5 */;
    font-size: 0.293333rem /* 11/37.5 */;
    padding: 0;
    margin: 0;
    color: #eeac71;
    background-color: #fff2e9;
    display: inline-block;
    padding: 0 4%;
    border-radius: 0 0 0.29216216216216217rem 0.29216216216216217rem;
    position: relative;
  }

如图

解决：用flex布局

  .time-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .time-top {
    border-top: 0.064054rem solid #fff2e9;
    width: 100%;
    margin: 0;
    padding: 0;
  }

如图

如果不用flex,父子元素转换成兄弟元素也可以

最后

由于css3是新属性，而且父元素设定了display: flex;之后其所有子元素都会变成行内块元素。所以在不同的情况下还要作相应的布局处理。