如何使div的位置随浏览器窗口缩放大小比例变化???

Question

如题所述

Answer 1

要使元素的位置随着浏览器窗口的缩放大小比例变化，你可以使用 CSS 中的相对定位和百分比单位来实现。以下是一种常见的方法：

HTML：CSS：

.my-div {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
background-color: #f0f0f0;
}

在上面的示例中，我们使用了相对定位（position: relative）来相对于父级元素进行定位。然后，通过设置 top 和 left 属性为 50%，将元素的中心点定位在父级元素的中心。

接下来，使用 transform 属性和 translate(-50%, -50%) 值来将元素自身的宽度和高度的一半向左上方偏移，以使其完全居中。

最后，通过设置元素的宽度和高度为百分比值（例如 50%），使其相对于父级元素的大小进行缩放。

这样，当浏览器窗口缩放时，元素的位置和大小将根据父级元素的大小进行自适应调整。

Answer 2

<div style="position:absolute; left:10vw; top:10vh">...</div>

left:10vw：距离窗口（其实是可视区域，即窗口去掉边框。下同）左边是整个窗口宽度的10%

top:10vh：距离窗口上边是整个窗口高度的10%

如果想大小也随窗口缩放而变化，则可以这样：

<div style="position:absolute; left:10vw; top:10vh; width:50vw; height:50vh">...</div>

width:50vw：宽度是整个窗口宽度的50%

height:50vh：高度是整个窗口高度的50%

Answer 3

left:10vw：距离窗口（其实是可视区域，即窗口去掉边框。下同）左边是整个窗口宽度的10%

top:10vh：距离窗口上边是整个窗口高度的10%

如果想大小也随窗口缩放而变化，则可以这样：

...
width:50vw：宽度是整个窗口宽度的50%

height:50vh：高度是整个窗口高度的50%
扩展资料：
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。DIV在编程中又叫做整除，即只得商的整数。DIV是一个块级元素。这意味着它的内容自动地开始一个新行。
<div>可定义文档中的分区或节（division/section）。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记<div>，那么该标签的作用会变得更加有效。注释：<div>是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。提示：请使用<div>元素来组合块级元素，这样就可以使用样式对它们进行格式化。
当我们使用CSS-P的时候，我们主要把它用在DIV（division）tag上。当你把文字，图像，或其他的放在DIV中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在DIV中的HTML。本回答被网友采纳

Answer 4

<div style="position:absolute; left:10vw; top:10vh">...</div>left:10vw：距离窗口（其实是可视区域，即窗口去掉边框。下同）左边是整个窗口宽度的10%top:10vh：距离窗口上边是整个窗口高度的10%如果想大小也随窗口缩放而变化，则可以这样：<div style="position:absolute; left:10vw; top:10vh; width:50vw; height:50vh">...</div>width:50vw：宽度是整个窗口宽度的50%height:50vh：高度是整个窗口高度的50%

Answer 5

<div style="position:absolute; left:10vw; top:10vh">...</div>left:10vw：距离窗口（其实是可视区域，即窗口去掉边框。下同）左边是整个窗口宽度的10%top:10vh：距离窗口上边是整个窗口高度的10%如果想大小也随窗口缩放而变化，则可以这样：<div style="position:absolute; left:10vw; top:10vh; width:50vw; height:50vh">...</div>width:50vw：宽度是整个窗口宽度的50%height:50vh：高度是整个窗口高度的50%