1、二者区别
1.1 官方文档给出的区别
1.2 代码示例
<style>
.test1{
width: 100px;
height: 100px;
border: 2px solid black;
padding: 5px;
box-sizing: border-box;
}
.test2{
width: 100px;
height: 100px;
border: 2px solid black;
padding: 5px;
box-sizing: content-box;
}
</style>
<div class="test1" ref="test1"></div>
<div class="test2" ref="test2"></div>
二者区别
二者的宽高
console.log(this.$refs.test1.clientWidth) //96
console.log(this.$refs.test1.clientHeight) //96
console.log(this.$refs.test2.clientWidth) //110
console.log(this.$refs.test2.clientHeight) //110
二者的盒模型
test1
test2
由此可以看出
content-box 是在宽高之外绘制padding和border的,也就是content=100的大小不变,是100*100的盒子,往外延伸padding,撑开了border
border-box 是在宽高以内绘制padding和border的,也就是content+padding+border=100不变,首先绘制border+padding,然后压缩content