分享一个小技巧，在外部盒子有padding的情况下，怎么画占满全部盒子的线条

相信大家都遇到过在一个盒子为了大体布局，必须得给盒子设置padding,但是呢，UI小姐姐们总爱在大体布局都有边距的情况下，却给里面的线条弄成占满全屏的。相信大家或多或少都遇到过这种布局。
这里我就不放例子了，相信大家都知道是什么样的，每个人解决办法都不一样。这里分享一下我的解决办法。

普通画线效果

.box{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    padding: 20px;
  }
  .box-inner{
    width: 100%;
    height: 100%;
    background: #f4f7ff;
  }
  .line-border{
    width: 100%;
    height: 1px;
    background: green;
  }

一点小小改动后

.box{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    padding: 20px;
    
  }
  .box-inner{
    width: 100%;
    height: 100%;
    background: #f4f7ff;
  }
  .line-border{
    width:calc(100% + 40px);  // 主要代码
    height: 1px;
    background: green;
    transform: translateX(-20px); // 主要代码
  }

相信大家都看到了，方法很简单。

原理解析

这里其实主要就是将线条宽度设置为外部盒子的宽度width:calc(100% + 40px)，并且将线条左移合适的距离transform: translateX(-20px)，所以其实使用定位或者负的margin之类的也是可以达成这个效果的