CSS3中可以通过来指定盒子模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

    可以分成两种情况：

    1. box-sizing: content-box盒子大小为width + padding + border
    2. box-sizing: border-box 盒子大小为width

    如果盒子模型改为box-sizing：border-box，那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

    image.png
    实现：

    1.     <style>
    2.     div{
    3.         width: 200px;
    4.         height: 200px;
    5.         box-sizing: border-box;
    6.         border: 20px solid #000;
    7.         background-color: #bfbfbf;
    8.         padding: 20px;
    9.     }
    10.     </style>
    11. </head>
    12. <body>
    13.     <div>猪</div>
    14. </body>