cSS3中可以通过 box-sizing 来指定盒模型，有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宽度)

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Document</title>
    10.   <style>
    11.     * {
    12.       margin: 0;
    13.       padding: 0;
    14.     }
    16.     div {
    17.       width: 200px;
    18.       height: 200px;
    19.       padding: 10px;
    20.       border: 20px solid red;
    21.       background-color: blue;
    22.     }
    24.     p {
    25.       width: 200px;
    26.       height: 200px;
    27.       padding: 10px;
    28.       border: 20px solid red;
    29.       background-color: blue;
    30.       box-sizing: border-box;
    31.     }
    32.   </style>
    33. </head>
    35. <body>
    36.   <div>winFang</div>
    37.   <p>winFang</p>
    38. </body>
    40. </html>

    image.png

    所以以后就可以用下面的代码来设置全局默认模式

        * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }