三、布局 3.1浮动布局 3.2定位布局

池布旁

已于 2022-02-23 22:40:51 修改

阅读量206

点赞数

分类专栏： CSS层叠样式表文章标签： css3 css html

于 2022-02-22 17:40:31 首次发布

本文链接：https://blog.csdn.net/m0_63692368/article/details/123073421

版权

CSS层叠样式表专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了HTML/CSS中的浮动布局与定位布局。浮动布局包括left和right浮动，以及如何使用clear属性清除浮动影响。定位布局则讲解了static、absolute和relative三种定位方式，以及它们在实际布局中的应用。

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

3.1浮动布局
Float： left 向左浮动； right 向右浮动； none 不浮动；
（该属性可以应用于任何元素）

当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响

浮动的清理(clear)
值：
none：默认值。允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：左右两侧不允许有浮动对象
Cursor 属性用于显示光标的形态

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	div{
		width: 200px;
		height: 200px;
		font-size: 36px;
		font-family: '微软雅黑';
	}

	#one{
		background-color: red;
		float: right;/*float： left 向左浮动 right 向右浮动 none 不浮动    注:-该属性(float)可以应用于任何元素 */
	}

	#two{
		background-color: blue;
		float: left;
	}

	#three{
		background-color: green;
		clear: both;/*浮动的清理(clear) 值： none：默认值。允许两边都可以有浮动对象; left：不允许左边有浮动对象  
		                                  right：不允许右边有浮动对象 ;             both：左右两侧不允许有浮动对象
		               (当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过消除浮动的方法来解决，浮动元素的影响)*/
	}

	#four{
		background-color: orange;
		float: right;

	}

	</style>
</head>
<body>
	<div id="one">1</div>
	<div id="two">2</div>
	<div id="three">3</div>
	<div id="four">4</div>
</body>
</html>

3.2定位布局
posotion: 表示定位布局，它是非常常用的一种布局方式（要先用position才能设置位置）

#one{
		width: 200px;
		height: 200px;
		background-color: red;
		position: absolute;
		top: 200px;
		left: 200px;
		}

static ：静态定位：页面中的每一个对象的默认值。

absolute：绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。

relative：相对定位：对象不从文档中分离，通过设置left，right，top。bottom四个方向相对于自身位置进行相对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}

	#one{
		width: 200px;
		height: 200px;
		background-color: red;
		position: absolute;
		/* position: 表示定位布局，它是非常常用的一种布局方式
		   static 静态定位：页面中的每一个对象的默认值。    注:(要先用position才能设置位置)
           absolute: 绝对定位：将对象从文档流分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象，则依据body对象。
           relative: 相对定位：对象不从文档中分离，通过设置left，right，top,bottom四个方向相对于自身位置进行相对定位  */
		top: 200px;
		left: 200px;
	}

	#two{
		width: 200px;
		height: 200px;
		background-color: green;
	
	}

	#three{
		width: 200px;
		height: 200px;
		background-color: pink;
	}

	#main{
		width: 800px;
		height: 800px;
		border: 1px solid black;
		margin: 0 auto;/*表示居中*/
		position: relative;
	}


	</style>


</head>
<body>
<div id="main">
	<div id="one"></div>
	<div id="two"></div>
	<div id="three"></div>
</div>	
</body>
</html>