CSS文档流、浮动、定位总结

最新推荐文章于 2023-06-22 08:30:00 发布

小智RE0-走在路上

最新推荐文章于 2023-06-22 08:30:00 发布

阅读量257

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/MrTumnus/article/details/114893430

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS中的三种基本布局方式：文档流、浮动及定位。详细解释了这些布局方式的工作原理，包括如何通过浮动使元素脱离文档流，以及相对定位和绝对定位的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.文档流

文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放标签，即为文档流。

也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。

2.浮动

使标签脱离原来的文档流，在父标签中浮动起来。

浮动使用float属性。

可选值：

none ：不浮动

left ：向左浮动

right ：向右浮动

块级标签和行级标签都可以浮动；

行级标签浮动以后将会自动变为块级标签。

当一个块级标签浮动以后，宽度会默认是内容的宽度；

浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流，这时不会再去影响父标签的高度；也就是浮动标签不会撑开父标签。

当一个标签浮动以后，其下方的标签会上移；标签中的内容将会围绕在标签的周围；
这时出现的问题需要使用清除浮动来处理；
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

left ：忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
			    padding:0;/* 设置清除浏览器默认的内边距和外边距 */
			}
			.nva-box #nva{
				float: left;/* 设置向左浮动 */
				text-align: center;/* 设置文本居中 */
				width: 100px;/* 设置宽度 */
				padding: 10px 0px;/* 设置内边距 */
				background-color: #FFC0CB;/* 设置背景颜色 */
				font-size: 20px;/* 设置字体尺寸 */
				font-family: "楷体";/* 设置字体类别 */
				color: #FFFFFF;/* 设置字体颜色 */
				font-weight: bold;/* 设置字体加粗 */
			}
			.nva-box{
				width: 800px;
				margin: auto;/* 设置外边距 */
			}
			.nva-box #nva:hover{
				/* 设置鼠标移动到上边的显示属性 */
				color: #DB7093; 
				background-color: #FF8C00;
			}
		</style>
	</head>
	<body>
		<div class="nva-box">
		<div id="nva">首页</div>
		<div id="nva">打开方式</div>
		<div id="nva">今日要闻</div>
		<div id="nva">热门</div>
		<div id="nva">留言</div>
		<div id="nva">购物</div>
		<div id="nva">法律信息</div>
		<div id="nva">访谈录</div>
		<div style="clear: left;"></div><!-- 清除前面的左浮动 -->
		</div>
	</body>
</html>

运行：

在这里插入图片描述

3.定位

在网页制作过程中，大区域的部分可以通过浮动来调整布局，但是小区域内的布局就需要精准定位来实现。

定位:必须找准一个参照物。

相对定位

相对定位:position: relative;

开启了相对定位,没有设置偏移量,标签位置不动；

left top right bootom设置偏移量；

相对定位是以其原来的位置为参照物移动；

移动后其原来位置还被占用(没有脱离文档流)；

与其他标签位置重叠时会提升一个层级；

相对定位不会改变标签的性质。

绝对定位

绝对定位：position: absolute;
绝对定位是不占空间的。

开启了绝对定位的标签就会脱离原来的文档流。

没有设置偏移量位置不变，

left top right bootom设置偏移量，

绝对定位是以离他最近的开启了定位的祖先标签进行定位,
这两个条件有一个不满足,就会以浏览器的窗口为参照物定位。

绝对定位会改变标签的性质，行级标签变成块标签；

绝对定位会使标签提升一个层级。

一般设置是要给父级标签开启相对定位，子级开启绝对定位。

例如，写一个文件使得两个小图标精准布局在一张图片的两边：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				display: block;/* 设置图片标签变为块标签 */
			}
			.md_box{
				width: 677px;/* 设置宽度 */
				height: 292px;/* 设置高度 */
				margin: auto;/* 设置外边距为自动,居中 */
				position: relative;/* 开启相对定位 */
			}
			.md_box .btn_left,.md_box .btn_right
			{
			width: 20px;/* 设置宽度 */
			height: 20px;/* 设置高度 */
			background-color: darkgray;/* 设置背景颜色 */
			opacity: 0.6;/* 设置透明度 */
			font-size: 15px; /* 设置文本尺寸 */
			text-align: center;/* 设置文本居中 */
			font-weight: bold;/* 设置加粗 */
			line-height: 15px;/* 设置行高 */
			border-radius: 10px;/* 设置四个角为圆角边框 */
			position: absolute;/* 开启绝对定位 */
			top: 140px; /* 距离父级标签顶部140个像素 */
			}
			.btn_right{
			right: 0px;	/* 右边的图标紧贴右边 */
			}
		</style>
	</head>
	<body>
		<div class="md_box">
			<img src="img/photo.png" />
			<div class="btn_left">&lt;</div>
			<div class="btn_right">&gt;</div>
		</div>
	</body>
</html>