理解CSS布局中的文本覆盖问题
在网页开发中，尤其是在构建响应式布局时，开发者经常会遇到内容（特别是文本）溢出其容器，甚至覆盖其他元素的问题。这通常是由于CSS属性设置不当，导致元素尺寸计算错误或空间分配不足所致。当一个元素被赋予了一个固定或限制性的尺寸，而其内部内容又超出了这个尺寸时，就可能发生溢出。在移动设备上，由于屏幕尺寸的限制，这类问题会变得尤为突出，直接影响用户体验。
问题分析：height: 00vh;的陷阱
在提供的CSS代码片段中，body元素被赋予了height: 00vh;这个属性：
body {
align-items: center;
background-color: black;
display: flex;
height: 00vh; /* 问题所在 */
justify-content: center;
margin: 0;
}这里存在两个关键问题：
- 无效的单位值： 00vh在CSS中是一个无效的单位值。正确的视口高度单位应为vh（viewport height），通常使用如100vh来表示占据整个视口高度。00vh会被解析为0vh。
- height: 0vh;的后果： 当body元素的高度被显式设置为0vh（即0高度）时，它实际上不为任何内容提供垂直空间。尽管body内部的子元素（如.doi_tuong）可能具有自己的高度和内边距，但它们的父容器（body）被强制为0高度，这会导致内容溢出，表现为文本或其他元素“悬浮”在页面之外，或者覆盖其他本应独立显示的内容。在这种情况下，即使使用了Flexbox进行居中，也无法弥补父容器高度不足导致的溢出问题。
此外，HTML代码中使用了已被废弃的标签进行样式设置，这不符合现代Web开发的最佳实践。所有的样式都应通过CSS来管理，以实现结构与样式的分离。
立即学习“前端免费学习笔记（深入）”；
Lorem et ipsum Lorem et ipsum
