网页上显示如下
<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;
3059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
