语法：box-sizing: content-box | border-box
默认值： content-box
计算方式：

  1. content-box：盒子的宽度是给定的宽度+padding+border,盒子的高度是给定的高度 + padding + border，设置了padding和border也不会减少内容的宽度和高度。
  2. border-box：盒子的宽度和高度就是给定的宽度和高度，如果设置了padding和border，将减少内容的宽度和高度。

如下实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> .layout { padding: 20px; width: 200px; height: 200px; border: 2px solid chartreuse; } .use-box-sizing { background: yellow; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-bottom: 5px; } .no-use-box-sizing { background: red; } </style>
</head>
<body>
<div class="layout use-box-sizing">使用box-sizing</div>
<div class="layout no-use-box-sizing">不使用box-sizing</div>
</body>
</html>

显示的结果设这样的
单独看每个盒子的具体布局
这是没有设置box-sizing的div，box-sizing使用的是默认值content-box

这个是设置了box-sizing的div

可以看出如果设置了box-sizing为box-border的div的实际宽度和高度都没有改变，但是内容的宽高减少了，变为了宽：156px，高：156px，没有设置box-sizing的div，实际宽高变了，宽：244px，高：244px，但是内容的宽高没有改变，