css定位小技巧

最近在忙着做组件,发现之前的组件做的不好看,其关键在于我们没有 UI 标准,所有的标准由产品定,设计就出一个看上去大差不差的效果图(尺寸没有按标准来做,多少会差个几像素)。然后开发按照原型标准来做

这倒是的我们前端出的产品处于没有标准但看上去是一回事的状况

这不,在重构过程中,我发现之前的组件的不合理之处

在做 Tag 标签组件时,发现加 border 的标签比其他的都长了

image-20211111142921445

查看 CSS,发现是因为 border 的长度导致,因为这里有三个标签,加起来就有 6 个像素,所以看起来就很明显

使用 box-sizing: border-box 更改盒模型,回顾一下,盒模型有哪几种,

标准盒模型

  • width= content

IE 盒模型(怪异盒子)

  • width=content+border+padding

但问题是我所有的盒模型都已经格式化为 border-box。所以这个方法没有用

参考了一下同行的做法,这里给有赞一个赞

他们的做法是对主 UI 做相对定位,再在 before 中添加绝对定位,即

.Tag {
  position: relative;
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid;
    border-color: inherit;
    border-radius: inherit;
    content: "";
    pointer-events: none;
  }
}

这样就做到了在 主容器中(Tag 组件)实现边框的内嵌