浏览器盒模型对于content-box属性的div，由于它的宽度和高度只有content部分，因此内容宽高固定，padd

1.content-box和border-box之间的区别：主要在于它们在width,height属性中的区别

对于content-box只包含content部分的尺寸

对于border-box 包含border+padding+content三部分的总和

2.在CSS里有属性box-sizing属性可以设置 box-sizing: content-box | border-box | inherit

代码示例：

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        .box{
            width: 100px;
            height:100px;
            padding: 20px;
            border: 5px solid red;
        }
        .use-content-box{
            box-sizing: content-box;
        }        
        .use-border-box{
            box-sizing: border-box;
        }    
    </style>
</head>
<body>
    <div class="box use-content-box" >这是W3C标准盒模型</div>
    <div class="box use-border-box" >这是IE盒模型</div>
</body>
</html>

我们可以得到如图的结果：

对于content-box属性的div，由于它的宽度和高度只有content部分，因此内容宽高固定，padding和box的宽度将相当于向外扩展。最后整个div的宽高是150px=100px+20px*2+5px*2

而对于属性为border-box的div，它的宽高为content padding border 三部分的总和，因此content+20px*2+5px*2=100px，得出content部分宽高为50px。这种情况下padding和border相当于在向内挤压content部分。

3.实际应用：当子容器的宽度设置为父容器的100%的时候，需要使用box-sizing: border-box; 来保证子容器的宽度不会因为padding和border的宽度而溢出。