HTML中的文档流

文档流

什么是文档流?

文档流:页面从上往下一行一行,其中每行从左至右的顺序,这种排列方式成为文档流。

什么是脱离了文档流?

脱离文档流意味着 它的排列顺序不遵循正常情况下文档的排列顺序,已经脱离了文档流,它不占用空间,处于浮动状态,脱离了文档流的元素的定位相对于其正常情况下的文档流,所以处于正常文档流的元素会占用原先的空间。

脱离文档流的几种情况?
首先是float

1.先说一下,float使得元素脱离文档流,该元素也可以理解为不占用空间了,那么处于正常情况下的元素就占用了它的空间,所以通过下面的例子演示一下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>float学习</title>
		<style type="text/css">
			.firstDiv
			{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				float: left;
			}
			.secondDiv
			{
				width: 150px;
				height:150px;   /*为了更能看到效果设置两者宽度不一样*/
				background-color: #7FFFD4;
			}
		</style>
	</head>
	<body>
		<div class="firstDiv">
			红框
		</div>
		<div class="secondDiv">
			蓝绿
		</div>
	</body>
</html>

效果展示:
在这里插入图片描述给红div加上了float效果,红div就脱离了文档流,蓝绿div是还遵循正常的文档流,所以占据正常的文档流。

其次是absolute(绝对定位)

absolute(绝对定位),他是根据父级的对位而定位的,如果父级的没有定位会向更高级的父级查看,值得注意得是这个,absolute的父级定位不能是static属性,(不加定位的默认属性)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>float学习</title>
		<style type="text/css">
			.firstDiv
			{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
		        position: absolute;
				top: 20px;
				
			}
			.secondDiv
			{
				width: 150px;
				height:150px;
				background-color: #7FFFD4;
			}
		</style>
	</head>
	<body>
		<div class="firstDiv">
			红框
		</div>
		<div class="secondDiv">
			蓝绿
		</div>
	</body>
</html>

效果展示:
在这里插入图片描述

可见absolute和float还是有一定区别的,absolute的会完全脱离文档流,包括容器中的内容,absolute定位是相对于父级来定位的。

再者就是fixed定位

fixed脱离文档流,位置与文档流无关,相对浏览器窗口也就是(html)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>float学习</title>
		<style type="text/css">
						.firstDiv
			{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
		        position: fixed;        /*相对浏览器窗口*/
				top: 50px;
				
			}
			.secondDiv
			{
				width: 150px;
				height:1500px;
				background-color: #7FFFD4;
			}
		</style>
	</head>
	<body>
		<div class="firstDiv">
			红框
		</div>
		<div class="secondDiv">
			蓝绿
		</div>
	</body>
</html>

效果展示:
在这里插入图片描述

可见position中的fixed完全脱离了文档流,相对于窗口位置固定。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值