HTML弹性布局以及定位

最新推荐文章于 2023-08-26 18:12:31 发布

懦夫救星*

最新推荐文章于 2023-08-26 18:12:31 发布

阅读量909

点赞数

本文链接：https://blog.csdn.net/v790873/article/details/100073815

版权

弹性布局：display:flex; block;inline-block;inline;none;

弹性容器：在元素上设置了display:flex;的属性即为弹性容器。弹性容器里面的子元素就会按照弹性布局的方式进行布局。

弹性子元素：弹性容器里面的直接子元素即为弹性子元素。

<style type="text/css">
			#parent{
				/*设置id为parent的元素为弹性容器。里面 直接子元素的布局方式即为弹性布局*/
				display: flex;
				width: 600px;
				height: 600px;
				background: skyblue;
				margin: 0 auto;
			}
			
			.child{
				width: 200px;
				height: 200px;
				background: pink;
				/*display: inline-block;
				float: left;*/
			}
		</style>
<div id="parent">
			<div class="child">
				<span>123</span>
			</div>
			<div class="child"></div>
			<div class="child"></div>
</div>

注意：弹性子元素为3个child的div元素，span不属于直接子元素，那么不是弹性布局。

弹性布局主轴：确定子元素的排布是水平排布还是竖直排布。侧轴为主轴的垂直方向。

设置主轴的方向：flex-direction，

row(默认值)：子元素是从左到右进行排布。

Row-reverse: 子元素是从右到左排布

Column:子元素从上到下排布

Column-reverse:子元素从下到上排布。

注意：默认弹性子元素只会排成1行或者是1列。不会换行。

/*设定主轴的排布方式
 justify-content: 
 flex-start(默认);向主轴的开始端靠拢
 flex-end;向主轴的末尾靠拢
 center;内容向中间靠拢
 space-between:平均分布，两边没有边距。
 space-around:平均分布，两边有边距，两边的边距是中间的一半。
 space-evenly;平均分布，两边的边距跟中间的一致
 * 
 * */
justify-content: space-evenly;

/*设定侧轴的排布
 align-items: 
 stretch(默认值)：拉伸。在不设置子元素高度的情况下，默认会拉伸到跟父元素一致的高度。
 flex-start:靠近侧轴的开端
 flex-end:靠近侧轴的结束端
 center:在侧轴居中
 * 
 * */
align-items: center;

弹性布局多行排布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.parent{
				width: 600px;
				height: 600px;
				background: #ccc;
				margin: 0 auto;
				display: flex;
				
				
				/*设置弹性可以换行
				 flex-wrap: 
				 nowrap(默认);
				 wrap换行
				 * */
				flex-wrap: wrap;
				
				/*设置侧轴的多行排布
				 stretch(默认拉伸)
				 flex-start:靠近侧轴的开端
				 flex-end:靠近侧轴的结束端
				 space-between:平均分布。两边没有间距
				 space-around:平均分布，两边间距是中间的一半
				 space-evenly：平均分布，两边的间距跟中间一样
				 * */
				align-content:space-evenly ;
				
			}
			
			.child{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="child" style="background: orange;">1</div>
			<div class="child" style="background: lawngreen;">2</div>
			<div class="child" style="background: cyan;">3</div>
			<div class="child" style="background: orange;">1</div>
			<div class="child" style="background: lawngreen;">2</div>
			<div class="child" style="background: cyan;">3</div>
		</div>
	</body>
</html>

剩余空间占据flex

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%;
			}
			.page{
				width: 100%;
				height: 100%;
				background: #ccc;
				display: flex;
			}
			.lanmu{
				/*flex：可以定义剩余空间的占据情况*/
				background: greenyellow;
				flex: 1;
			}
			.main{
				background: purple;
				flex: 2;
			}
			.ad{
				/*width: 200px;*/
				flex: 1;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<div class="lanmu">栏目1</div>
			<div class="main">主要内容2</div>
			<div class="ad">广告</div>
		</div>
	</body>
</html>

弹性子元素的排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#parent{
				/*设置id为parent的元素为弹性容器。里面 直接子元素的布局方式即为弹性布局*/
				display: flex;
				width: 900px;
				height: 600px;
				background: skyblue;
				margin: 0 auto;
			}
			
			.child{
				width: 200px;
				height: 200px;
				background: pink;
				
			}
		</style>
	</head>
	<body>
		<!--
			order:
				在子元素上设置order，可以按照从小到大的方式进行排序。
		-->
		<div id="parent">
			<div class="child" style="background: orange;order: 5;">1</div>
			<div class="child" style="background: lawngreen;order: 3;">2</div>
			<div class="child" style="background: cyan; order: 4;">3</div>
			<div class="child" style="background: lawngreen;order: 1;">4</div>
			<div class="child" style="background: cyan;order: 2;">5</div>
			
		</div>
	</body>
</html>

弹性子元素侧轴单独设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#parent{
				/*设置id为parent的元素为弹性容器。里面 直接子元素的布局方式即为弹性布局*/
				display: flex;
				width: 900px;
				height: 600px;
				background: skyblue;
				margin: 0 auto;
			}
			
			.child{
				width: 200px;
				height: 200px;
				background: pink;
				
			}
			
			.c3{
				/*单独对侧轴的子元素进行排布。
				 flex-start
				 flex-end
				 stretch
				 center
				 * */
				align-self: center;
			}
		</style>
	</head>
	<body>
		<!--
			order:
				在子元素上设置order，可以按照从小到大的方式进行排序。
		-->
		<div id="parent">
			<div class="child" style="background: orange;">1</div>
			<div class="child" style="background: lawngreen;">2</div>
			<div class="child c3" style="background: cyan;">3</div>
			<div class="child" style="background: lawngreen;">4</div>
			<div class="child" style="background: cyan;">5</div>
			
		</div>
	</body>
</html>

HTML定位

相对定位position: relative;相对定位相对于自己当前位置的一个移动。原来空间的位置依然会被占据，只是样子移动。

必须配合：left,right,top,bottom四个属性使元素移动。。

绝对定位position: absolute;相对于设定了定位的父元素或者是祖先元素进行定位。脱离正常的文档流，不占据之前的空间。

必须配合：left,right,top,bottom四个属性使元素移动。。

固定定位position: fixed;相对于浏览器进行定位。脱离正常的文档流，不占据空间。

Z-index:设定在同一位置上定位元素，谁的位置更在前面。数值越大，层越高，越在前面显示。

懦夫救星*

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML弹性布局以及定位

弹性布局：display:flex; block;inline-block;inline;none;弹性容器：在元素上设置了display:flex;的属性即为弹性容器。弹性容器里面的子元素就会按照弹性布局的方式进行布局。弹性子元素：弹性容器里面的直接子元素即为弹性子元素。<style type="text/css"> #parent{ /*设置id...
复制链接

扫一扫