box-sizing 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>box-sizing</title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                border: 2px solid red;
                background-color: #BBFFAA;
                padding: 10px 20px;
                /* 
                    box-sizing
                        这个属性可以修改盒子大小的计算方式
                        可选值
                            content-box   默认值，内容盒子（width和height指定的是内容区的大小）
                            border-box   width和height指定的是整个盒子的大小
                 */
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

 

posted @ 2022-05-09 14:39  氯丙嗪  阅读(7)  评论(0)    收藏  举报