box-sizing属性CSS的盒模型包含了margin,padding,border,content。 CSS3提供了

CSS的盒模型包含：margin,padding,border,content。

CSS3提供了box-sizing这个属性来修改盒子模型尺寸的计算方式。

box-sizing有两个属性值：

content-box: 设置width=200px。就是content区域是200px 盒子的实际宽度为content+border+padding。高度同理
border-box：设置width=200px。盒子的实际高度就是content+border+padding=200px。即content区域=200px-border-padding。高度同理。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .content-box{
        box-sizing: content-box;
        width: 200px;
        height: 200px;
        padding: 10px;
        margin: 20px;
        border: 10px solid red;

    }
    .border-box{
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        padding: 10px;
        margin: 20px;
        border: 10px solid blueviolet;
    }
</style>
<body>
    <div class="content-box">content-box</div>
    <div class="border-box">border-box</div>
</body>
</html>

在浏览器中效果如下：