1. 盒子模型

CSS3盒子模型(怪异盒子模型)

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

content-box: 对象的实际宽度等于设置的 width 值和 border、padding 之和 (默认方式)。

border-box： 对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度，即 ( Element width = width ), 我们把这种方式叫做 css3 盒模型。

.box1 {
         width: 100px;
         height: 100px;
         border: 10px solid red;
         padding: 20px;
         background-color: pink;
         /* w3c标准盒子 */
         box-sizing: content-box;
       }

.box2 {
         width: 100px;
         height: 100px;
         border: 10px solid burlywood;
         padding: 20px;
         background-color: violet;
         /* 怪异盒子 */
         box-sizing: border-box;
      }

<div class="box1">w3c标准盒子</div>
<div class="box2">怪异盒子</div>