关于定位理解及实验

最新推荐文章于 2024-02-06 07:00:00 发布

流浪的小宇

最新推荐文章于 2024-02-06 07:00:00 发布

阅读量218

点赞数

分类专栏：实践问题及解决

本文链接：https://blog.csdn.net/b150461/article/details/101107651

版权

实践问题及解决专栏收录该内容

20 篇文章 0 订阅

订阅专栏

有一段时间没有写了，前一段时间眼镜坏了没有心情。等到配好眼镜突然发现刚学会的东西好几天没用忽然忘记了，模糊不清。破坏学习的心情，又硬着头皮看了几遍关于浮动的视频。总算是找到感觉了。

这个东西要理解，多动手实践。理解了原理就会明白为什么会那样了。韩顺平老师讲的非常具体啊！记录一下结果留存。坚持努力，加油啊自己！！

效果图：
在这里插入图片描述
笔记：

这个效果用这个知识点我写了两种。
第一种是全部用的是绝对定位。效果都是一样的。灰色的块移动包含的内容都会移动。
黄色的块移动里面的内容也都移动。
蓝色的块移动里面的内容也会跟着移动。
只要搞清楚参考点就不是那么难了。另外没有使用通配符选择器
*{margin:0 padding 0}所以浏览器默认会有边距。
第一种思路html代码：


<!doctype html>
<html>
	<head>
		<title>
			定位练习
		</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./out.css">
	</head>
	<body>
		<div class="div-box">
			<div class="div1">内容1</div>
			<div class="div1">内容2</div>
			<div class="div1">内容3</div>
			
			<div class="div1 div-yellow">
				内容4
				<div class="div-blue">
					内容5
					<div class="div-pink">
						内容6
					</div>
				</div>
			
			</div>
		</div>

css代码：

div-box{
	width:800px;
	height:400px;
	background:silver;
	position:absolute;
	margin-left:150px;
}
.div1{
	width:100px;
	height:100px;
	background:pink;
	margin:15px;
	float:left;
}
.div-yellow{
	width:300px;
	height:200px;
	position:absolute;
	left:350px;
	top:120px;
	background:yellow;
	float:left;
}
.div-blue{
	width:180px;
	height:150px;
	background:blue;
	position:absolute;
	top:25px;
	left:50px;
	margin-left:20px;
}
.div-pink{
	width:80px;
	height:50px;
	background:pink;
	position:absolute;
	top:30px;
	left:50px;
}

如果想要这种结果：
在这里插入图片描述
灰色块中的绝对定位 position:absolute 删除，并调整 margin 的值即可

第二种思路顺便复习了一下浮动的知识点。（不小心掉坑里了）
html代码：

<!doctype html>
<html>
	<head>
		<title>
			定位混合写
		</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./out2.css">
	</head>
	<body>
		<div class="div-box">
			<div class="div1">内容1</div>
			<div class="div1">内容2</div>
			<div class="div1">内容3</div>
			<div class="yellow">
				内容4
				<div class="blue">
					内容5
					<div class="pink">内容6</div>
				</div>
			</div>
		</div>
	</body>
</html>

css代码：

.div-box{
	width:800px;
	height:400px;
	background:silver;
	margin-left:100px;
}
.div1{
	width:100px;
	height:100px;
	margin:15px;
	float:left;
	background:pink;
}
.yellow{
	width:300px;
	height:200px;
	position:relative;
	top:130px;
	right:30px;
	background:yellow;
	float:left;
}
.blue{
	width:180px;
	height:150px;
	position:relative;/*如果用相对定位需让出文字的空间 (top)*/
	top:20px;
	left:50px;
	background:blue;
}
.pink{
	width:80px;
	height:50px;
	background:pink;
	position:absolute;/*相对定位，绝对定位都可，空大够它折腾的*/
	top:30px;
	left:50px;
}

在这里插入图片描述
哎呀多个知识点放一块就晕啊！练习，多练习!!