[分享]css中如何让边框也算入宽度

CSS中边框如何算入宽度呢？

.box {
  width: 100px;
  height: 50px;
  box-sizing: border-box;
  border: 5px solid black;
  padding: 10px;
} 

上面的代码中，我们通过设置box-sizing属性为border-box，让边框也算入宽度。这样，一个宽度为100px，边框宽度为5px，内边距为10px的盒子，其实际宽度为100px，不会因为边框和内边距的存在而变宽。

反之，如果我们不设置box-sizing属性，那么默认值为content-box，此时边框和内边距是不会算入宽度的，盒子的实际宽度会因为边框和内边距的存在而变宽。

.box {
  width: 100px;
  height: 50px;
  /* box-sizing: content-box; */  /* 不设置box-sizing，或设置为content-box时 */
  border: 5px solid black;
  padding: 10px;
} 

上面的代码中，如果我们注释掉box-sizing属性，或者将其设置为content-box，那么此时盒子的实际宽度就会变成120px，因为边框和内边距会额外占据20px的宽度。

因此，要想让边框也算入宽度，就要设置box-sizing为border-box。