css的布局定位

关注

原创最新推荐文章于 2026-09-20 12:45:58 发布 166 阅读 AI 写同款· GEO 优化 ›

CSS 布局与定位全解析下面详细介绍几种CSS布局模型，包括流动布局（也称为正常文档流）、浮动布局、定位布局、多列流动布局和弹性盒布局，并提供实际的例子来说明它们的使用。这些布局模型是构建现代Web界面的基础。阅读详情

</html>

<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
			div{
				width:200px;
				height:100px;
				border:2px solid blue;
			}
			#div11{
			    background-color:red;
				top:80px;
				left:120px;
				position:absolute;

			}
			#div12{
			    background-color:green;
				width:250px;
				height:150px;
			}
			#div13{
			    background-color:orange;
				
			}
		</style>
	</head>
	<body>
          <div id="div11">AAAAAAAAAAAAAAAAAAAAA</div>
	      <div id="div12">bbbbbbbbbbbbbbbbbbbbb</div>
		  <div id="div13">ccccccccccccccccccccc</div>
	
	</body>
</html>
___________________________________________________________________________________
</html>

<html>
	<head>
		<title>HTML示例</title>
		<style type="text/css">
			div{
				width:200px;
				height:100px;
				border:2px solid blue;
			}
			#div11{
			    background-color:red;
			
				position:relative;
				top:80px;
				left:120px;

			}
			#div12{
			    background-color:green;
			
			}
			#div13{
			    background-color:orange;
				
			}
		</style>
	</head>
	<body>
          <div id="div11">AAAAAAAAAAAAAAAAAAAAA</div>
	      <div id="div12">bbbbbbbbbbbbbbbbbbbbb</div>
		  <div id="div13">ccccccccccccccccccccc</div>
	
	</body>
</html>

收录于