2020-9-3

最新推荐文章于 2024-10-13 21:18:37 发布

L—wan

最新推荐文章于 2024-10-13 21:18:37 发布

阅读量82

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_47182606/article/details/108394656

版权

1：弹性布局：（例子）

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/* parent为弹性容器\ */
			.parent{
				width: 800px;
				height: 800px;
				border: 1px solid #ccc;
				margin: 0 auto;
				display: flex;
				/* 设置主轴方向
				 row:从左到右
				 column：从上到下
				 */
				flex-direction: column;
				/* 设置主轴内容分布
				 flex-start:向主轴开始位置靠拢（默认）
				 center:向主轴中心靠拢
				 flex-end：向主轴结束位置靠拢
				 space-around:平均分布，两边间距是中间的一半
				 space-between：平均分布，两边没有间距
				 space-evenly：两边有间距，两边的间距跟中间一样
				  */
				justify-content:space-evenly;
				/* 设置侧轴的内容分布
				 center:向侧轴中心靠拢
				 flex-end：向侧轴结束位置靠拢
				 stretch:拉伸（默认），如果设置高度，拉伸无效*/
				align-items: center;
			}
			/* child为弹性子元素 */
			.child{
				width:200px;
				height:200px;
				background-color: 	;
			}
				
			.c1{
			   background-color: skyblue;
			}
			
			.c2{
				background-color: orange;
			}
			
			.c3{
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child c1">1</div>
			<div class="child c2">2</div>
			<div class="child c3">3</div>
		</div>
	</body>
</html>


布局分布
`<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				display: flex;
			}
			/* 剩余空间分布设置
			 flex:1;占据一份
			 flex：2；占据两份
			 如此推论
			 */
			.left{
				flex: 1;
				background-color: #87CEEB;
			}
			.main{
				background-color: aqua;
				flex: 2;
			.ad{
				width: 200px;
				background: #DA70D6;
			}	
		</style>
	</head>
	<body>
		<!-- 侧边栏是主要内容一半
			广告栏固定是200px
			
			弹性布局剩余空间分布设置
		 -->
		 
		 <div class="left">
			 <h1> 侧边栏</h1>
		 </div>
		<div class="main">
			<h1>主要内容</h1>
		</div>
		<div class="ad">
			<h1>有你的世界在哪里？</h1>
		</div>
	</body>
</html>