盒模型相关知识点清楚解释+图形说明

盒子模型

border-box:宽度包括边框 padding

content-box：宽度只是内容
然后就是top left margin-left padding width height %百分比的问题了；
代码如下：

<style>
        .father {
            position: relative;
            width: 500px;
            height: 400px;
            background-color: palegoldenrod;
        }
        
        .son {
            width: 50%;
            height: 50%;
            position: absolute;
            top: 10%;
            left: 10%;
            margin-left: 10%;
            margin-top: 10%;
            padding-left: 5%;
            padding-right: 5%;
            padding-top: 10%;
            padding-bottom: 10%;
            border: 20px solid purple;
            background-color: palegreen;
        }
    </style>

可以从上面的盒子模型得出：
left top 分别相对于父盒子的宽高百分比；
margin-left margin-top padding-left padding-top 都是相对父盒子的宽度百分比；
width heigth都是分别相对父盒子的宽高百分比；
效果图如下：