布局操作基础_操作布局-CSDN博客

本文链接：https://blog.csdn.net/weixin_56709347/article/details/116380295

布局

文档流

文档流就是按照元素的顺序，从左到右，从上到下的方式排序

		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 300px;
				height: 80px;
			}
		</style>
	</head>
	<body>
		<img>
		<img>
		<img>
		<img>
		<img>
		<img>
		<img>

如果有块级标签，块级会占据一整行。
在img中加一个块级元素加div

<style type="text/css">
			img{
				width: 300px;
				height: 80px;
			}
			div{
				width: 300px;
				height: 80px;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<img>
		<img>
		<img>
		<img>
		<img>
		<div></div>
		<img>
		<img>

定位

默认文档流许多时候无法满足我们的需求，需要更多地布局手段。
用到定位分为:
（1）默认定位(static)
（2）相对定位(relative)
（3）绝对定位(absolute)
（4）固定定位(fixed)

static默认定位

无定位，不受left、right、top、bottom属性的影响，元素出现在正常流中。

<style type="text/css">
			img{
				width: 300px;
				height: 80px;
				left: 300px;
			}
			div{
				width: 300px;
				height: 80px;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<img>
		<img>
		<img>
		<img>
		<img>
		<div></div>
		<img>
		<img>

relative 相对定位

在这里插入图片描述
可以看出div2是相对于原有的位置进行left、right、top、bottom进行位移，而且对后续元素(div3)没有任何的影响不脱离文档流

absolute 绝对定位

父相子绝：父亲相对定位，儿子绝对定位。脱离文档流
在这里插入图片描述

fixed 固定定位

脱离文档流
在这里插入图片描述

z-index

重新定位之后可能会出现重叠，我们可以通过z-index来调整其顺序。z-index的默认值是auto，即与父元素相同，可以设置为数值，数值大的层位相对于小的上方。
在这里插入图片描述

定位总结

（1）标准文档流按照从左到右，自上而下的方式依次排列元素。若要改变默认的布局方式则需要使用定位：relative absolute fixed等定位方式
（2）relative：是相对于原有位置来进行偏移的
（3）absolute：是相对于父容器来进行偏移的，注意父容器必须是有定位的，即非默认（static）定位方式，否则会一直往上追溯，直到页面
（4）fixed：是相对于整个页面进行偏移
（5）relative：不会从标准流中脱离，而absolute和fixed都从标准流中脱离出来。

浮动

通过设置浮动，可以使元素从原本的文档流中脱离出来，感觉像浮在原本的文档流上面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				height: 100px;
				width: 500px;
				background-color: aqua;
			}
			#div2{
				width: 100px;
				height: 200px;
				background-color: #666666;
				float: left;
			}
			#div3{
				width: 300px;
				height: 200px;
				background-color: green;
				float: left;
			}
			#div4{
				width: 100px;
				height: 200px;
				background-color: #666666;
				float: left;
			}
			/* #clear{
				clear: both;
			} */
			#div5{
				height: 100px;
				width: 500px;
				background-color: aqua;
				clear: both;
			}
			/* #box:after,#box:before{
				content: "";
				display: block;
				clear: both;
			} */
			/* #box{
				height: 300px;
				overflow: hidden;
			} */
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="box">
			<div id="div2"></div>
			<div id="div3"></div>
			<div id="div4"></div>
			<div id="clear"></div>
		</div>
		<div id="div5"></div>
	</body>
</html>