缩放

最新推荐文章于 2023-10-17 00:53:46 发布

zhouzy539

最新推荐文章于 2023-10-17 00:53:46 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/zhouzy539/article/details/80559113

版权

div+css布局缩放样式就乱了

1.如果布局用的是绝对定位（position:absolute），在外边加一个div层（给它一个父级），外边的div层加上相对定位（position:relative），然后再去调整子级的位置（top，left等）。这一次，无论你怎么去缩小你的窗口都会岿然不动的！

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<style> 
	 .top{ width: 1400px; }
	 .top{ width: 100%; }
	 .top div{ float: left; width: 500px; border: 1px solid red; height: 100px; }
	  </style>
	<body>
	    <div class="top"> 
	    	<div></div> <div></div> 
	</div> 	
	</body>
	</html>

看两种.top的对比

用div css 布局时,使用的是浮动的样式排版; 排不下就会往下面浮动; 给div 一个固定的宽度;(给一个固定的容器,如果不给就默认把浏览器窗口当容器)容器定下来后,就与浏览器的窗口大小无关了;

3.要想缩小后出现滚动条，宽度就不能设为百分比（否则的话窗口缩小后它就按缩小后的窗口宽度来计算百分比了），而应该设为绝对值，比如通常都是设为990px的（如淘宝的详情页）。
此外还可以把百分比与绝对值相结合来使用，比如：
{width:90%; min-width:990px}