标题和段落重叠

Question

我会尽量保持简单。但是我实际上是使用HTML，CSS和javascript制作我的第一个网站。在某些情况下，如何停止文本重叠，我找不到一个明确的答案。例如我有一个段落，想在其下放置一个标题，但是由于我的位置不好，它们重叠了。这是这两个的CSS代码。还可以像我在段落中那样使用百分比吗？

h2{
color : #D50505;
text-align : left;
font-family: Government Agent;
font-size: 40px;
}

.paragraph1 {

color : #F5C438;
text-align: center;
font-family: Government Agent;
font-size: 20px;
position : absolute;
top : 20%;
}

Answer 1

它在响应式设计中没有太大帮助。 我更喜欢使用“ vw”，即“视口宽度”或“ vh”，即“视口高度”。

Answer 2

它确实取决于您在哪里使用它。在我看来，您正在尝试将文本段落放在屏幕上的某个位置。请注意，如果使用像素，则更改屏幕或窗口的大小，如果使用像素，则该段落可能不再位于正确的位置。您应该研究响应式网页设计。百分比是开始理解该概念的好地方。

Answer 3

百分比是根据显示器尺寸计算的，其中10％将覆盖显示器屏幕的10％ 10px将在小屏幕和大屏幕上显示10像素，

我建议使用VH或VW，此外，宽度用于百分比，高度用于像素

Answer 4

取决于您使用它的时间，它可能是好是坏。如果使用它在x轴上缩放项目（指定元素的宽度），则最终在所有设备上的宽度都将保持恒定，这对于响应式Web设计（RWD）并不是最好的选择。但是，如果您要指定页边距或填充（最好在margin-top | margin-bottom或padding-top | padding-bottom中使用），则可以，只要 vertical < / strong>缩放。您可以了解有关RWD here的更多信息。