html怎么使得页面缩小里面的内容不会重叠,而保持一定位置?

2025-04-02 12:19:30
推荐回答(4个)
回答1:

1、首先打开网页制作应用程序后,通过打开现有编辑区内容进行说明。

2、然后在菜单栏选择查看,其中点击放大和缩小对编辑区进行页面缩放。

3、通过使用快捷命令ctrl+=放大编辑区页面。

4、然后通过使用快捷命令ctrl+-缩小编辑区页面。

5、或者在菜单栏中点击查看>缩放比率选择百分比来放大缩小编辑区。

回答2:

1、使用相对布局,不要用绝对布局,position:relative;使用margin-left:margin-top等,来分别设置边距。

遇见不会做的,按F12打开开发者模式,复制粘贴就行了,天下设计一大抄。

回答3:

可以使用transform,支持可变高度。
用法比较常见的是,以百分比计算让内容块始终居中的样式:transform: translate(-50%,-50%)和top: 50%; left: 50%;。
如果你想要内容快也相应缩小,可以将宽高也设成百分比,例如
.is-Transformed {

width: 50%;
height:30%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
具体该调多少百分比你可以调整下。注意要添加-webkit和-ms为了保证浏览器之间兼容。

回答4:

会浮动吗? position:relative 固定登录的div距离浏览器左边的距离, 那么无论你是怎么拉, 内容都会距离浏览器左侧一样, 不会随屏幕大小变动