盒尺寸中的4个盒子content box、padding box、border box 和margin box分别对应CSS世界中的content、padding、border和margin属性，这四个属性称为“盒尺寸四大家族”，让我们前去探秘吧！
1.1 margin与元素尺寸以及相关布局
这里的各类“尺寸”命名和对应的盒子类型全部参考自 jQuery 中与尺寸相关 API 的名称。
元素尺寸：对应 jQuery 中的$().width()和$().height()方法，包括 padding
和 border，也就是元素的 border box 的尺寸。在原生的 DOM API 中写作 offsetWidth
和 offsetHeight，所以，有时候也成为“元素偏移尺寸”。元素内部尺寸：对应 jQuery 中的$().innerWidth()和$().innerHeight()方法，
表示元素的内部区域尺寸，包括 padding 但不包括 border，也就是元素的 padding
box 的尺寸。在原生的 DOM API 中写作 clientWidth 和 clientHeight，所以，
有时候也称为“元素可视尺寸”。元素外部尺寸：对应 jQuery 中的$().outerWidth(true)和$().outerHeight
(true)方法，表示元素的外部尺寸，不仅包括 padding 和 border，还包括 margin，
也就是元素的 margin box 的尺寸。没有相对应的原生的 DOM API。
注意：“外部尺寸”有个很不一样的特性，就是尺寸的大小有可能是负数
