Title


  .box {
  border: 5px solid rebeccapurple;
  background-color: lightgray;
  padding: 40px;
  margin: 40px;
  width: 300px;
  height: 150px;
  box-sizing: content-box;
  }

  .box.alternate {
    box-sizing: border-box;
  }

box-sizing: content-box;

盒子宽度(390)=css宽度(300px)+左右内边距(80px)+左右边框宽度(10px)
盒子真实内容宽度(210)=css宽度(300px)
boxDom.clientWidth(380) = 盒子宽度(390)-左右边框宽度(10px)
boxDom.offsetWidth(390) = 盒子宽度(390)

I use the standard box model.

box-sizing: border-box;

盒子宽度(300)=css宽度(300px)
盒子真实内容宽度(210) = css宽度(300px)-左右内边距(80px)-左右边框宽度(10px)
boxDom.clientWidth(380) = 盒子宽度(390)-左右边框宽度(10px)
boxDom.offsetWidth(300) = 盒子宽度(300)

I use the alternate box model.