2.margin-top和margin-bottom的纵向重叠

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

p {

font-size: 16px;
line-height: 1px;
margin-top: 10px;
margin-bottom: 15px;

}

效果演示：

结论：

1.相邻两个元素的margin-top和margin-bottom会发生重叠

2.空内容的p标签也会重叠

3.上述AAA和BBB实际上就是相距15px（margin-bottom）

3. 对px、em、rem、vw、vh、vm、vmin，vmax的一些定义，看了就明白了

px：像素相对长度单位，相对于显示器屏幕分辨率(推荐使用)，

em： 相对长度单位 相对于父节点的字体大小来计算的，（浏览器默认字体是16px）如果自身定义了font-size按自身来计算（不推荐）

rem：相对于根节点的字体大小来计算的

vm：视窗的1/100，视窗就是浏览器的内容区域，window.innerWidth, 经常用到100vm表示浏览器宽度全占

vmin： vw和vh中较小的那个。

vmax： vw和vh中较大的那个。

注意：

1.window.screen.height（屏幕高度）
2.window.innerWidth（视口宽度）
3.window.body.clientHeight(body高度)

水平居中：

1.inline元素： text-align：center

2.block元素： margin: auto

3.absolute元素： left：50%；margin-left负值

垂直居中：

1.inline元素： line-height
2.absolute元素： top：50%；margin-top负值
3.absolute元素： tranform（-50%，-50%）
4.absolute元素： top，right，bottom，left=0；margin：auto