盒模型的组成部分

网页在渲染时，会将所有的元素默认为一个盒子，而盒子的属性就是css决定的。 盒模型的组成部分如上图所示，主要由：content，padding，border，margin组成。

我们日常所说的content box和border box就可以按上图理解。

1. content box就是图中content的部分。
2. border box就是图中content+padding+border的部分。

所以，content box与padding box的差异就在padding和border。

margin重叠

默认情况下：

1. 子元素之间会存在上下margin重叠，但左右不会； 解决方法：加一行display:inline-block;

2. 父元素与子元素之间也会存在margin重叠的情况（当子元素的margin大于父元素的margin时，子元素的margin会称为整个元素的边界）； 解决方法：在父元素中加入padding/border/overflow:hidden