HTML+CSS知识点（九）盒子模型

盒子模型的尺寸组成  （默认尺寸）宽 ：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