如何在不使用固定尺寸的情况下定义空间？

Question

首先，我是Overflow的新手，所以请原谅我，如果这是错误的。

以下是我的问题：我正在学习CSS，而且我目前正在为一个简单的测试页面设计html样式。我需要移动一些文本，以便在它和某些形式（~100px）之间有一个很好的空间。我已经在margin中输入了固定值，就像100px一样，可以正常工作......但是没有响应。如果我在手机或甚至不同大小的显示器上查看文件，它会因为它试图保持静态100px而出现偏差。

过去，我通过使用百分比而不是像素来解决这个问题。例如，我将图像width设置为100％而不是100px。无论你看到它，它总是填满屏幕。不幸的是，我无法定义一个百分比的空间。

如何在不使用固定尺寸的情况下定义空间，以便它具有响应性？

示例：

• 我尝试使用大图片作为div的背景。 div 它还没有任何东西，所以我自然只会看到一条薄薄的条带 图片。如果我使用像素设置图像尺寸，它会扩展 div，但没有回应。如果我尝试使用百分比，它仍然是一个薄条。 100％的div不会改变div宽度，因为它已经在 100％。 （我后来通过将图像应用为body的背景来解决此问题，但问题仍然存在。
• 我在按钮下面有200px的文字。问题是我希望文本和按钮都保留在背景图像的顶部。如果我设置像素尺寸并且图像是无用的，则无论图像有多小，文本总是在按钮下方200px。如何设置它以使其始终位于按钮下方的某个百分比，或者从图像的底部（以更方便的方式）？

注意：我不太了解js，php或CSS和html以外的任何内容。如果您需要在答案中使用另一种编程语言，请解释一下。谢谢！

Answer 1

要设置div的固定高度和宽度，在响应时，我使用单位vh和vw。例如，要将div的高度设置为视口的40％（视口是用户在网页上的可见区域。），请使用：
Api Monitor
这样，即使您调整浏览器大小或在其他设备上查看它，它也总是将该div渲染为视口高度的40％。 您还可以使用其他相关单位。见http://www.w3schools.com/cssref/css_units.asp