CSS定位

最新推荐文章于 2021-06-03 09:51:42 发布

佛系小菜鸡

最新推荐文章于 2021-06-03 09:51:42 发布

阅读量222

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_40224261/article/details/104168870

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

CSS定位

改变元素在页面上的位置

CSS定位机制

普通流
元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局

CSS position属性

static（静态布局）
与相对布局相差不大，但是偏移量对其不起作用
relative（相对布局）
相对布局，占据位置，可以通过left，right等属性进行位置的相对偏移
通过更改z-index属性可以改变覆盖的顺序，谁的值大，谁在上面
absolute（绝对布局）
绝对布局，不占位置，会遮盖其他的元素，悬浮于其他元素之上
通过更改z-index属性可以改变覆盖的顺序，谁的值大，谁在上面
fixed（固定布局）
不管页面如何滚动，都固定在同一位置

浮动布局

浮动元素脱离网页文档，与其他元素发生重叠，但是不会与文字内容发生重叠
使用场景：文字环绕效果，横向排列效果

float属性可用的值

left：元素向左浮动
right：元素向右浮动
none：元素不浮动
inherit：从父集继承浮动属性

clear属性：

去掉浮动属性（包括继承来的属性）

clear属性值：

left、right：去掉元素向左、向右浮动
both：足有两侧均去掉浮动
inherit：从父集继承来clear的值

左浮动和右浮动

左浮动，元素靠左对齐

在这里插入图片描述

右浮动，元素靠右对齐

案例代码

左浮动有浮动代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				background-color: green;
				width: 100px;
				height: 100px;
				float: right;/* 浮动布局 */

			}
			.div2{
				background-color: red;
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<p>文字环绕效果</p>
		<div class="div1"></div>
		<div class="div2"></div>
	</body>
</html>

左浮动效果
右浮动效果
实现文字环绕和横向布局效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				background-color: green;
				width: 100px;
				height: 100px;
				float: left;/* 浮动布局 */

			}
			.div2{
				background-color: red;
				width: 200px;
				height: 150px;
			}
			.a{
				width: 200px;
				background-color: green;
			}
			.b{
				width: 500px;
				background-color: red;
			}
			.c{
				width: 300px;
				background-color: blue;
			}
			.a,.b,.c{
				float: left;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<p>文字环绕效果</p>
		<div class="div1"></div>
		<div class="div2">
			文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
		</div>
		<p>横向布局排列</p>
		<div class="a">
			
		</div>
		<div class="b">
			
		</div>
		<div class="c">
			
		</div>
	</body>
</html>

文字环绕效果
横向布局排列效果

浮动所产生的问题

当将元素设置为浮动之后，那么后面加入的元素将会被浮动元素所遮盖。

问题展示
黑色块为300px，上方三个为200px，黑色块部分被遮盖。

在这里插入图片描述

问题的解决

方案1：给浮动的元素外套一个不为浮动元素的div

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.a{
				width: 20%;
				background-color: green;
			}
			.b{
				width: 60%;
				background-color: red;
			}
			.c{
				width: 20%;
				background-color: blue;
			}
			.a,.b,.c{
				float: left;
				height: 200px;
			}
			.d{
				background-color: black;
				height: 300px;
			}
			.f{
				/* height: 200px; */
				overflow: auto;
			}
		</style>
	</head>
	<body>

		<p>解决下方div被浮动元素所覆盖问题</p>
		<div class="f">
			<div class="a">
				
			</div>
			<div class="b">
				
			</div>
			<div class="c">
				
			</div>
		</div>
		
		<div class="d">
			
		</div>
	</body>
</html>

效果图：
在这里插入图片描述
注意：要为父级元素设置高度的height的原因是浮动元素不占空间，因此无法将父集元素div撑开。
也可以使用overflow: auto;，当子元素溢出出自动，父元素自动撑开匹配大小。

方案2：使用clear：left/right/both ，表示该元素不受左右浮动的影响

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.a{
				width: 20%;
				background-color: green;
			}
			.b{
				width: 60%;
				background-color: red;
			}
			.c{
				width: 20%;
				background-color: blue;
			}
			.a,.b,.c{
				float: left;
				height: 200px;
			}
			.d{
				background-color: black;
				height: 300px;
				clear: left;
			}
			
		</style>
	</head>
	<body>
		<p>解决下方div被浮动元素所覆盖问题</p>
		<div class="a">	
		</div>
		<div class="b">			
		</div>
		<div class="c">
		</div>
		<div class="d">		
		</div>
	</body>
</html>