计算真实div盒子的宽度和高度

box-sizing属性

结果为width: 100px; height: 100px;

<style>
        .big {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
        }
    </style>
<body>
    <div class="big"></div>

</body>

普通盒子的宽度和高度=内容区域+padding+border

结果为width: 122px; height: 122px;

<style>
        .big {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            border: 1px solid #000;
        }
    </style>
<body>
    <div class="big"></div>

</body>
posted @ 2021-02-21 14:19  BesePawn  阅读(326)  评论(0)  编辑  收藏  举报