CSS样式——浮动(float)与定位(position)

最新推荐文章于 2022-09-23 22:06:01 发布

炽叶

最新推荐文章于 2022-09-23 22:06:01 发布

阅读量598

点赞数

本文链接：https://blog.csdn.net/Mon3tr/article/details/100598503

版权

CSS的定位机制有三种：标准流（也叫普通流或文档流）、浮动流、定位流。
标准流布局： 编写一个网页时，将标签元素从上到下、从左到右排列顺序，块级元素会独占一行，行内元素会按先后顺序依次排列。

在实际应用中，为了使网页看起来简洁美观，需要将不同大小、形状的块级元素拼合起来，凑成一个整面。
编写三个div盒子，因为是块级元素，受到标准流的规则约束，他们都是独占一行，如图：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
</head>
<style>
	*{
		padding:0;
		margin:0;
	}
	.box1{
		width:150px;
		height:50px;
		border:2px solid red;
		margin:20px auto;
		padding:25px;
		font-size:36px;
	
		}
	.box2{
		width:150px;
		height:50px;
		border:2px dashed blue;
		margin:20px auto;
		padding:25px;
		font-size:36px;
		
		}
	.box3{
		width:150px;
		height:50px;
		border:2px dotted black;
		margin:20px auto;
		padding:25px;
		font-size:36px;
		
		}

</style>
<body>
	<div class="box1" align="center">A</div>
	<div class="box2" align="center">B</div>
	<div class="box3" align="center">C</div>
</body>
</html>

在这里插入图片描述
通过浮动来使元素脱离标准流控制，达到并排显示的效果。
（在三个盒子的CSS样式中写上float:left;）

浮动(float)的值：
float:left (左浮动)；
float:right (右浮动)；
float:none (元素不浮动，并显示在元素在文本中出现的位置);
float:inherit (规定应该从父元素继承 float 属性的值。)