盒子模型的尺寸组成 (默认尺寸)宽 :padding-left + border-left + 盒子本身的宽度 + padding-right + border-right 高 :padding-top + border-top + 盒子本身的高度 + padding-bottom + border-bottom
限制盒子尺寸
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
/* padding: 20px; */
/* border: 10px solid green; */
/* content-box 代表盒子默认尺寸 */
/* box-sizing: content-box; */
/* border-box:设定以后代表盒子的所有尺寸包含在我设置的宽高里 */
/* box-sizing: border-box; */
padding-top:50px;
box-sizing: border-box;
}
.son{
width: 100px;
height: 100px;
background-color: indigo;
}
</style>
<!-- 盒子模型的尺寸组成 (默认尺寸)
宽 :padding-left + border-left + 盒子本身的宽度 + padding-right + border