理解响应式布局中的元素遮盖问题
在进行网页布局时，开发者常会遇到元素在不同屏幕尺寸下表现异常，尤其是文本内容溢出或遮盖其他元素的情况。这在移动设备上尤为常见。虽然很多时候人们会首先想到使用媒体查询（Media Query）来解决此类问题，但有时根本原因可能出在更基础的CSS属性设置上。本教程将聚焦于一个常见的误区：对body或父容器设置不当的height值，特别是height: 00vh;。
height: 00vh;：一个隐蔽的布局陷阱
在提供的代码片段中，body元素被赋予了height: 00vh;的属性。这里的00vh实际上等同于0vh，即0个视口高度单位。这意味着body元素的高度被强制设置为零。
当body的高度为零时，尽管其内部的Flexbox属性（display: flex; align-items: center; justify-content: center;）旨在将内容居中，但由于容器本身没有高度，其内容（例如.doi_tuong及其内部文本）将无法在其期望的垂直空间内正确布局。结果就是，内容可能会溢出body的零高度边界，从而在视觉上表现为文本遮盖了其他元素或直接显示在页面顶部，而无法实现预期的居中效果。
解决方案：移除不必要的固定高度
解决此问题的关键在于移除body元素上错误的height: 00vh;声明。当height属性被移除或设置为auto时，body元素将根据其内部内容的实际高度自动扩展，从而为Flexbox布局提供正确的上下文。
以下是修正后的body样式：
body {
align-items: center;
background-color: black;
display: flex;
justify-content: center;
margin: 0;
/* 移除 height: 00vh; 或设置为 height: auto; */
}通过此修改，body将能够正确地容纳其内容，并且其内部的Flexbox属性将能够有效地将.doi_tuong元素水平和垂直居中，解决了文本遮盖问题。
优化与最佳实践
除了上述关键修正外，还有一些关于响应式设计和CSS实践的最佳建议：
HTML结构规范化： 原始HTML代码存在结构问题，
