CSS 盒子模型总结

• 把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型

• 盒子模型有两种模式：标准盒子模型，怪异盒子模型；两种模式可以利用 box-sizing 属性进行自行选择：标准模式：box-sizing:content-box；怪异模式：box-sizing:border-box;

• 两种模式的宽度计算

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

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