HTML中取消style标签注释后body内div布局错乱是什么原因？

问题原因 #

布局混乱的核心是你写了全局的<a>标签样式：

a {
  display: inline-block;
  margin-top: 100vh;
}

这里涉及两个CSS规则的作用：

• 100vh是视口高度单位，1vh等于浏览器可视区域高度的1%，100vh就等于完整的一屏高度
• 默认<a>是行内元素，上下外边距不会生效，但你设置了display: inline-block后，上下margin就会正常生效

所以你页面里的3个列表链接，每个都带上了一整屏高度的上外边距，自然会被巨大的间距隔开，看起来像被独立容器分开。

解决方法 #

如果你这段a标签样式是给特定跳转链接准备的，不要直接用标签名做全局选择器，改成类选择器即可：

/* 替换原有的a选择器 */
.bottom-jump {
  display: inline-block;
  margin-top: 100vh;
}

后续只给需要这个样式的a标签加上class="bottom-jump"，就不会影响列表里的链接。
如果你本来就不需要这个样式，直接删掉这段a标签的CSS代码即可恢复正常布局。

小提示：刚接触CSS建议优先用类选择器控制元素样式，尽量不要直接给全局标签加通用样式，很容易产生意料之外的全局影响。

内容的提问来源于stack exchange，提问作者c0d3r4ng0