CSS盒模型
CSS盒模型将CSS中的元素整体视为一个盒子BOX，这个box由四个部分构成：
- margin
- border
- padding
- content
CSS盒模型分两种
- content-box
- border-box
区别
区别主要在于width（或height）包含的范围。
- content-box：
width只控制content部分的width - border-box：
width控制border+padding+content三部分的width
由区别可知，若未指定border和padding，则两种盒模型并无区别。
通常情况下我们都会使用border-box因为该盒模型更好用。
因为margin会合并，对元素大小的影响比较小，而border和padding的大小已经包含在width中，因此border-box能够更直观的控制元素的大小，同时更符合border调试法的使用习惯。
