个人笔记010--body高度100%时出现纵向滚动条的原因

       这两天做一个APP，首页要铺满屏幕所以设置body{ margin: 0; padding: 0;height: 100%; }，后面的时候发现最上面一个div如果写有margin-top就会出现纵向滚动条，后面上网百度查阅各种博客和资料才发现是CSS 外边距合并的原因（有点汗颜啊，虽然是比较少遇到，但还是显得基础比较烂），w3cshool是这样子解释的：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。所以这种设置body高度100%的情况应该避免最上面一个节点元素出现margin-top，下面两张图是我的测试demo（左边有有margin-top,右边无）：