box-sizing有哪些属性

• box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度

盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

• 标准盒模型 box-sizing: content-box
  content-box:
  width = content width;
  height = content height

• IE盒模型 box-sizing: border-box
  border-box:
  width = border + padding + content width
  heigth = border + padding + content heigth

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

<style>
div {
  width: 160px;
  height: 80px;
  padding: 20px;
 border: 8px solid orange;
  background: pink;
}

 /**元素的总宽度 = 160 + 20*2 + 8*2; 总高度 = 80 + 20*2 + 8*2 ; */ 
.content-box { 
  box-sizing: content-box; 
}

 /** 元素的总宽度 = 160; 总高度 = 80px; */  
.border-box { 
  box-sizing: border-box;
}
</style>

image.png

content box:

image.png

border box:

image.png

总结一下：
1.对于给定width和height的元素，设置box-sizing属性会影响盒子content width和 content height。
2.浏览器默认使用标准盒子模型，即box-sizing: content-box, 就是我们所写的宽度和高度就是对content 进行设置的。
3.在一些响应式布局中，我们修改了浏览器计算元素宽度、高度的方式，认为元素的宽度和高度是包括内边距padding和边框border

参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing