响应式布局

最新推荐文章于 2024-07-19 17:37:28 发布

DoneGis

最新推荐文章于 2024-07-19 17:37:28 发布

阅读量94

点赞数

分类专栏：杂七杂八文章标签： java python 开发语言

本文链接：https://blog.csdn.net/qq_42522024/article/details/131314760

版权

杂七杂八专栏收录该内容

2 篇文章 0 订阅

订阅专栏

响应式布局

1.左侧固定右侧自适应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		/**
		 块级显示模式: 独占一行,设置宽高起作用,在没有设置固定宽度时,和父元素的宽度一样
			   块元素:html,body,div,h1-h6,p,ul,ol,li,dl,dt,dd,hr,form
			
		padding减宽度的场景: 当块元素没有设置固定宽度时,宽度和父元素一样,给该元素设置
		水平方向的padding时,不会撑宽盒子,会从content自动减去padding值,宽度的尺寸是不
		变的
		当块元素设置固定宽度时.此时设置水平方向的padding,盒子的尺寸会变大
		 */
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				height: 600px;
				background: #ccc;
			}
			.left{
				width: 200px;
				height: 600px;
				background: yellow;
				float:left;
				margin-left: -100%;
			}
			.right{
				width:100%;
				height: 600px;
				background: yellowgreen;
				float:left;
				/* padding-left: 200px; */
				
				/* box-sizing: border-box; */
			}
			.content{
				padding-left:200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="right">
				<div class="content">右</div>
			</div>
			<div class="left">左</div>
		</div>
	</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				/* 最小宽度 */
				min-width:800px ;
				/* 最大宽度 */
				/* max-width: 1200px; */
				height: 600px;
				background: #ccc;
			}
			.left{
				width: 200px;
				height: 600px;
				background: yellow;
				float:left;
				margin-left: -100%;
			}
			.center{
				width:100%;
				height: 600px;
				background: yellowgreen;
				float:left;
				
			}
			.right{
				width: 200px;
				height: 600px;
				background: red;
				float:left;
				margin-left: -200px;
			}
			.content{
				padding: 0 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="center">
				<div class="content">
					中间哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中间
				</div>
			</div>
			<div class="left">左</div>
			<div class="right">右</div>
		</div>
	</body>
</html>

3.圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				/* 最小宽度 */
				min-width:800px ;
				/* 最大宽度 */
				/* max-width: 1200px; */
				height: 600px;
				background: #ccc;
				margin: 0 200px;
			}
			.left{
				width: 200px;
				height: 600px;
				background: yellow;
				float:left;
				margin-left: -100%;
				position: relative;
				left:-200px;
			}
			.center{
				width:100%;
				height: 600px;
				background: yellowgreen;
				float:left;
				
			}
			.right{
				width: 200px;
				height: 600px;
				background: red;
				float:left;
				margin-left: -200px;
				position: relative;
				right:-200px;
			}
			.content{
				padding: 0 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="center">
				中间哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈中间
			</div>
			<div class="left">左</div>
			<div class="right">右</div>
		</div>
	</body>
</html>