css浮动与定位

最新推荐文章于 2024-06-19 19:16:24 发布

乒乒乓乒乓

最新推荐文章于 2024-06-19 19:16:24 发布

阅读量161

点赞数 1

分类专栏： web学习文章标签：定位 css html

本文链接：https://blog.csdn.net/qq_44017357/article/details/109103007

版权

web学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的浮动属性，包括如何使用`float`让元素并排显示以及清除浮动的影响。同时，深入探讨了定位技术，如`position`属性的`absolute`、`relative`和`fixed`三种模式，并通过实例展示了它们在网页布局中的应用。通过这些知识，读者可以更好地理解和掌握网页元素的布局与定位技巧。

摘要由CSDN通过智能技术生成

浮动

块级元素在默认情况下要占据一整行的空间，想要让块级元素并排排列，可以使用浮动，但是，浮动只能在水平方向上进行定位，不能在垂直方向上进行定位。
浮动能使块级元素左右移动，直到它的外边缘碰到包含框或者另一个浮动框的边缘。

浮动的属性

浮动属性的常用的属性值有三个：none left right

清除浮动

浮动有时会影响到网页的布局


	<style>
		
		.class2{width: 100px;height: 50px;background: #005DA2;float: left;}
		.class3{width: 100px;height: 50px;background: #E67817;float: right;}
		.class4{width: 1160px;height: 40px;background: yellowgreen;}
	</style>
	<body>
			<div class="class2">2</div> 
			<div class="class3">3</div>
		
		<span class="class4">
			这是一行新文本
		</span>
	</body>

在这里插入图片描述
此时，新加入的文本并没有另起一行，而是出现在了两个浮动元素之间，会影响页面的布局
这个时候就需要使用clear属性


	<style>
		
		.class2{width: 100px;height: 50px;background: #005DA2;float: left;}
		.class3{width: 100px;height: 50px;background: #E67817;float: right;}
		.class4{width: 1160px;height: 40px;background: yellowgreen;}
		.class5{clear: both;height: 50px;width: 1160px;}
	</style>
	<body>
			<div class="class2">2</div> 
			<div class="class3">3</div>
		<div class="class5">
			
		</div>
		<span class="class4">
			这是一行新文本
		</span>
	</body>

在这里插入图片描述
此时一行新文本就会另起一行，不会出现在两个浮动元素之间

定位

在网页布局时，我们有时需要精确定位一些元素的位置，比如一些网页常常在页脚出现的小广告
在这里插入图片描述
在滚动鼠标时，我们会发现，无论怎样滚动鼠标，红框内的部分始终固定在屏幕的这个位置，不会向上或向下移动

要实现这个效果就要使用css定位技术

position属性

position属性时最重要的定位属性，通过position定属性既可以定位元素的绝对位置，也可以定位属性的相对位置
position常用的属性值有三种
absolute 绝对定位，相对于其父元素进行定位，可以通过z-index（设置元素的层叠顺序，值越大层级越高）进行层级分层
relative 相对定位，表示相对定位，但元素不可以重叠
fixed 悬浮，使元素固定在屏幕的某个位置，上面的例子使用的就是这个属性值

相对定位

页面的初始状态


	<style>
		
		.class1{width: 500px;height: 500px;background: #005DA2;float: left;}
		.class2{width: 100px;height: 50px;background: #E67817;float: right;}
	</style>
	<body>
			<div class="class1">
				<div class="class2"></div>
			</div> 
			
		
	</body>

在这里插入图片描述
此时，我们需要将橘黄色的小方块放置在蓝色小方块的中间位置只需要为橘色小方块添加position：relative；


	<style>
		
		.class1{width: 500px;height: 500px;background: #005DA2;float: left;}
		.class2{width: 100px;height: 50px;background: #E67817;float: right;position: relative;
		top: 200px;right: 200px;}
	</style>
	<body>
			<div class="class1">
				<div class="class2"></div>
			</div> 
			
		
	</body>

在这里插入图片描述

绝对定位

在这里插入图片描述
此时我们需要将橘色的小方块放置在页面的右上角
需要添加position: absolute;


	<style>
		
		.class1{width: 500px;height: 500px;background: #005DA2;float: left;}
		.class2{width: 100px;height: 50px;background: #E67817;float: right;position: absolute;top: -5px;}
	</style>
	<body>
			<div class="class1">
				<div class="class2"></div>
			</div> 
			
		
	</body>

在这里插入图片描述

固定定位

在这里插入图片描述
此时我们需要将橘色小方块固定在屏幕右下角
需要添加position: fixed;


	<style>
		
		.class1{width: 500px;height: 500px;background: #005DA2;float: left;}
		.class2{width: 100px;height: 50px;background: #E67817;float: right;position: fixed;top: 700px;left: 1400px;}
	</style>
	<body>
			<div class="class1">
				<div class="class2"></div>
			</div> 
			
		
	</body>