content-box与border-box区别

image.png

盒模型尺寸:

分两种：
a. 默认样式 content-box
b. border-box

区别

这两个盒子的宽度是否包含padding和border

代码

  
  
  


div

第一种默认样式

div{
  width:100px;
  height:100px;
  border:10px solid red;
  padding:20px;
}

image.png

第二种样式

div{
  box-sizing:border-box;
  width:100px;
  height:100px;
  border:10px solid red;
  padding:20px;
}

image.png

通过对比发现
默认的样式中 width宽度不包括 padding+border
但是box样式改为border-box之后，100px里面就包括padding+border