课堂笔记3月22

最新推荐文章于 2022-08-29 22:36:46 发布

蒸汽秋葵y

最新推荐文章于 2022-08-29 22:36:46 发布

阅读量45

点赞数

本文链接：https://blog.csdn.net/y850266/article/details/115069726

版权

html+css

布局：
标准流+浮动（一行来显示）
大相小绝/子绝父相:父盒子相对定位,子盒子绝对定位

position:定位相对定位、绝对定位固定定位

相对定位:相对于自己原来的位置来偏移，不脱标

偏移量 left、right、top、bottom

正数/负数/0:值越大,显示越靠前

absolute:绝对定位：根据上一个有定位的父盒子来偏移位置
如果说往上都没有定位的盒子，就根据body来偏移

绝对定位的盒子会脱标

fixed:固定定位,根据body来平移

<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style>
			.box{
				/* 大相小绝/子绝父相:父盒子相对定位,子盒子绝对定位 */
				position:relative;
				width:1000px;
				height:1800px;
				border:solid 5px red;
			}
			div{
				width:200px;
				height:200px;
			}
			.box1{
				/* position:定位 相对定位、绝对定位 固定定位 */
				position:relative; /* 相对定位:相对于自己原来的位置来偏移，不脱标 */
				/* 偏移量  left、right、top、bottom */
				left:100px;  /* 往左偏移100px; */
				top:170px;
				background-color:pink;
				z-index:1;  /* 正数/负数/0:值越大,显示越靠前 */
			}
			.box2{
				position:absolute;  /* absolute:绝对定位：根据上一个有定位的父盒子来偏移位置
				 如果说往上都没有定位的盒子，就根据body来偏移*/
				 /* 绝对定位的盒子会脱标 */
				/* 偏移量 */
				top:100px;
				right:200px;
				background-color:yellow;
			}
			.box3{
				/* fixed:固定定位,根据body来平移 */
				position:fixed;
				right:0px;
				top:200px;
				background-color:skyblue;
			}
			.box4{
				position:fixed;
				top:10px;
				width:500px;
				height:50px;
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
		</div>
	</body>
</html>