• 把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型
    • 盒子模型有两种模式：标准盒子模型，怪异盒子模型；两种模式可以利用box-sizing属性进行自行选择：
      标准模式：box-sizing:content-box；怪异模式：box-sizing:border-box;

    • 两种模式的宽度计算

      1. 标准盒子模型：盒子总宽度= width + margin(左右) + padding(左右) + border(左右)
      2. 怪异盒子模型：盒子总宽度= width + margin(左右)（即width已经包含了padding和border值）

    • 两种模式的区别：标准盒子模型会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子，盒子的大小并不会被padding所撑开