css固定定位页会脱离文档流吗？-偶像资源网

CSS固定定位页会脱离文档流。那么常用的CSS让元素脱离标准本文档流的方法有哪些？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。

CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

浮动

浮动是CSS中用到的最多的一个选项，他有三个性质。关于浮动我们要强调一点，永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

浮动元素脱离标准文档流

大概描述：有两个盒子，一个盒子浮动，一个盒子不浮动。浮动的盒子会脱离标准文档流，不浮动的盒子会在标准文档流中成为第一个，所以两者出现覆盖现象。

大概描述：一个行内标签在标准文档流中是不能设置宽高的，但是使用float使其脱离文档流之后，就可以对其设置宽高了。所有浮动的标签不会去区分行内标签和块级标签。也就是说：一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

浮动的元素互相贴靠

以float向左浮动为例：

如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。

如果没有足够的空间靠着1号大哥，自己去贴左墙。

浮动元素有“自围”的效果

自围效果就是：浮动的盒子可以遮盖文档标准流的第一个盒子，但是不会遮盖里面的文字，文字会围绕浮动的盒子显示。

在CSS代码中让div浮动，p不浮动，那么p中的文字就睡形成这种自围效果。

<div>
    <img src="images/1.jpg" alt="" />
</div>
<p>
123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

收缩现象

一个浮动元素如果没有给其设置宽高，则其大小收缩为文字的宽高。

绝对定位

绝对定位最大的用处就是制作页面中的压盖效果。

绝对定位使用的参考点是页面的角。绝对定位脱离标准文档物流即脱标。

position:absolute;

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<style>
			#outofnormal {
				width: 200px;
				background-color: cyan;
				padding: 10px;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="outofnormal">
			Out of normal: Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
			Sequi esse impedit autem praesentium magni culpa, amet corporis, veniam 
			consequatur voluptates temporibus. Voluptates eius similique asperiores 
			cupiditate fugit hic atque quisquam?
		</div>
		<h2>Normal Content</h2>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium 
		nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. 
		Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!
		</p>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit 
		velit nam delectus distinctio at unde aliquid officia illo, tempore vitae et 
		incidunt non, ut eos nesciunt quaerat. Enim, minus.
		</p>
	</body>

</html>

效果图：

固定定位

解释：就是相对浏览器定位，无论页面怎么滚动，他都不会变化。

用途：①固定导航栏②返回顶部

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<style>
			#outofnormal {
				width: 200px;
				background-color: cyan;
				padding: 10px;
				position: fixed;
				top: 100px;
			}
		</style>
	</head>

	<body>
		<div id="outofnormal">
			Out of normal: Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
			Sequi esse impedit autem praesentium magni culpa, amet corporis, veniam 
			consequatur voluptates temporibus. Voluptates eius similique asperiores 
			cupiditate fugit hic atque quisquam?
		</div>
		<h2>Normal Content</h2>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum praesentium 
		nam tempora beatae quis nobis laboriosam alias aliquid, tenetur exercitationem. 
		Odio, aperiam, illo! Eveniet natus dignissimos architecto velit eligendi id!
		</p>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem reprehenderit 
		velit nam delectus distinctio at unde aliquid officia illo, tempore vitae et 
		incidunt non, ut eos nesciunt quaerat. Enim, minus.
		</p>
	</body>

</html>

效果图：

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

css固定定位页会脱离文档流吗？

请登录后发表评论