注：以下拿宽度举例，高度同理！

设置盒子模型

通过box-sizing属性，属性值如下：

content-box：是默认值，默认为正常盒子
border-box：设置为怪异盒子

正常盒子（content-box）

即：实际宽度 = 设置的width宽度 + 左右padding + 左右border（内容区=设置的width）
例如：设置width为200px，padding为20px，border为1px，则实际宽度为242

怪异盒子（border-box）

即：实际宽度 = 设置的width宽度（内容区会被padding和border挤压）
例如：设置width为200px，padding为20px，border为1px，则实际宽度仍是200

代码如下：

<style>
    #box_pt{
        /* 打印得到的高度为242
            --200 + 40 + 2 = 242（设置高度200 + padding 20*2 + border 1*2） 
            --设置为200则内容区是200，如果有padding和border，则加在200的基础上
            --即：真实宽度 = 设置的width宽度 + padding*2 + border*2
        */
        width: 200px;
        height: 200px;
        border: 1px solid black;
        /* box-sizing: content-box; */
        padding: 20px;
    }
    #box_gy{
        /* 打印得到高度为200
            --padding + border + 内容区 = 200
            --设置为200则实际为200，内容区会被padding和border挤压
            --即：真实宽度 = 设置的width宽度
        */
        width: 200px;
        height: 200px;
        border: 1px solid black;
        box-sizing: border-box;
        padding: 20px;
    }
</style>
<body>
    <div id="box_pt">正常盒子-不会挤压内容区</div>
    <hr>
    <div id="box_gy">怪异盒子-会挤压内容区</div>
    <script>
        const box_pt = document.getElementById("box_pt")
        const box_gy = document.getElementById("box_gy")
        console.log(box_pt.offsetWidth);  // 242
        console.log(box_gy.offsetWidth);  // 200
    </script>
</body>

以上代码运行效果：

盒模型.png

css的两种盒子模型

注：以下拿宽度举例，高度同理！

设置盒子模型

正常盒子（content-box）

怪异盒子（border-box）

代码如下：

以上代码运行效果：