网页上显示如下
<style>
div:nth-of-type(1) {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 10px solid #000;
box-sizing: content-box;
/* 默认为content-box */
}
div:nth-of-type(2) {
width: 200px;
height: 200px;
background-color: skyblue;
padding: 10px;
border: 10px solid #000;
padding: 10px;
border: 10px solid #000;
box-sizing: border-box;
}
</style>
<body>
<div>content-box</div>
<div>border-box</div>
</body>
总结
1.content-box:默认的盒子类型,盒子的实际宽度为,设计宽度+左右padding+左右border;
2.border-box: 重置的盒子类型,盒子的世纪宽度为设计的宽度,包括左右padding+左右border;