CSS中width、height、padding、margin、百分比取值的基准问题

我们在写一些css样式的时候，经常会用到margin: 50%; padding: 50%;等，今天我专程测试了一下height、width、padding、margin、百分比取值的基准问题

    <div class="father">
        <div class="son"></div>
    </div>

     * {
            margin: 0px;
            padding: 0px;
        }

        .father {
            width: 300px;
            height: 500px;
            background-color: #ccc;
            padding: 10px 20px 30px 40px;
            margin: 10px 20px 30px 40px;
        }

        .son {
            background-color: pink;
            

            width: 50%;     /* width:150px */
           
            height: 50%;    /* height:250px */
           
            padding: 50%;   /* padding: 150px; */

            margin: 50%;    /* margin: 150px; */
            
        }

father盒子模型

总结 :

^_^ ~~

• father：你有多少钱？
• son：我有50%
• father：谁的50%？50%是多少？
• son：你的50%！