前端：浮动，定位布局

最新推荐文章于 2024-08-03 17:33:50 发布

程序员Fy

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量385

点赞数 7

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

本文链接：https://blog.csdn.net/fuyuo/article/details/125979140

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

浮动布局

主要属性参数

简单来说是：通过设置float属性进行布局
float一般有如下取值：

none:   不浮动
left：  左浮（对象向左浮动，而后面的内容流向对象的右侧）
right： 右浮（对象向右浮动，而后面的内容流向对象的左侧）

注意：left:前面的元素浮动效果后，会对后面元素产生影响
这时就要消除影响，消除影响的属性：

clear: left / right;

如下代码及运行结果：不设置浮动时是正常的。

<!DOCTYPE html>
<html>
<head>
	<title>浮动布局</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: blue;
		}
		.box2{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: red;	
		}
	</style>
</head>
<body>
	<div class="box1">1</div>
	<div class="box2">2</div>
</body>
</html>

在这里插入图片描述

发现问题

如果我想要让2个图水平排列时，就需要到浮动布局，只需要在第一个盒子里面代码中加入一句：

float: left

不消除浮动影响情况下代码及运行结果：

<!DOCTYPE html>
<html>
<head>
	<title>浮动布局</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: blue;
			float: left
		}
		.box2{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: red;	
		}
	</style>
</head>
<body>
	<div class="box1">1</div>
	<div class="box2">2</div>
</body>
</html>

在这里插入图片描述

如图没有消除影响的结果就是，2个图形都重合了，第一个图影响了第二个图。

解决问题

需要解决这个问题就要消除影响，在第二个盒子加入以下代码：

clear: left;

解决后的代码及结果如下：

<!DOCTYPE html>
<html>
<head>
	<title>浮动布局</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: blue;
			float: left
		}
		.box2{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: red;	
			clear: left;
		}
	</style>
</head>
<body>
	<div class="box1">1</div>
	<div class="box2">2</div>
</body>
</html>

在这里插入图片描述
如图，运行正常了。

定位布局

主要属性参数

主要属性：position 设置元素定位的方式。
三个值：

static      静态定位（没有定位）默认值
absolute    绝对定位：将对象从文档流中分离出来，相对于父级对象进行绝对定位，如果不存在这样的父级对象，则依据body对象
relative    相对定位：对象不从文档流中分离出来，通过相对于自身位置进行相对定位

相对定位例题

说明：最大的盒子离左边距有100px,小盒子长200px，宽100px。
没有定位布局设置的时候代码及截图

<!DOCTYPE html>
<html>
<head>
	<title></title>
		<style type="text/css">
		.main{
			margin: 100px;
			width: 600px;
			height: 300px;
			border: 1px solid black;
		}
		.box1{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="box1">1</div>
</body>
</html>

在这里插入图片描述

让盒子1左移 200px 就需要如下：
如果是相对定位，就加入如下代码到盒子1：

left: 200px;
position: relative;

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
		<style type="text/css">
		.main{
			margin: 100px;
			width: 600px;
			height: 300px;
			border: 1px solid black;
		}
		.box1{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: blue; 
			left: 200px;
			position: relative;  
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="box1">1</div>
	</div>
</body>
</html>

运行截图：
在这里插入图片描述
结果解释：这里盒子1使用的是相对定位，相对于自身原先本身的位置如没有定位布局时图中所示。因为是相对定位，所以当距离原先位置离左边200px时就得到了上图所示的位置。

绝对定位例题

还是上面那个例题变形，在盒子1中写入以下代码便是绝对定位：

left: 200px;
position: absolute;

代码及截图所示：

<!DOCTYPE html>
<html>
<head>
	<title></title>
		<style type="text/css">
		.main{
			margin: 100px;
			width: 600px;
			height: 300px;
			border: 1px solid black;
		}
		.box1{
			width: 200px;
			height: 100px;
			border: 1px solid black;
			background-color: blue;
			left: 200px;
			position: absolute; 
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="box1">1</div>
	</div>
</body>
</html>