关于css的定位问题

最新推荐文章于 2022-09-05 15:20:54 发布

web学习

最新推荐文章于 2022-09-05 15:20:54 发布

阅读量312

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_40532783/article/details/88626096

版权

前言

关于定位问题，首先了解DOM（文档对象模型）和文档流。

DOM就是把一个html想象成一棵树，你就有对一个html文档有了整体把握。知道谁是谁的父元素、子元素、兄弟元素、后代元素、祖先元素。

文档流自然而然引出了块元素和内联元素。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>postion</title>
</head>
<body>
<h1>看我！我是标题一</h1>

<p id="p1">看我！我是段落。<img src="D:\找工作\登陆+注册\image\star.png">左边是我的内联元素</p>

<img src="D:\找工作\登陆+注册\image\star.png">
<p id="p2">我上面是内联元素，他自成一段是因为他没在任何块元素里面。他的父元素是body</p>
</body>
</html>

这段可以得到这个结果图

块元素：就是自成一段，自带回车效果的标签。

内联元素：随波逐流，在块元素里就和块元素和谐相处于一行不会自动回车。比如<a>、<img>、<strong>、<q>、<em>、<span>等

通过上面的例子可以发现如果内联元素的父元素是body，他也会自成一段。把块元素放在块元素里，比如

<div>
我是一段<div>我也是一段</div>我居然也是一段！？
</div>

结果是三段。

此外块元素和内联元素也是可以相互转换的。通过display就可以了，可以选择block/inline。

现在回到文档流，了解完上述知识基本可以画出一部分的文档流。文档流就是把每个标签看成小框框，一个叠一个。

根据最前面的代码，抽象出的文档流长这个样子

中心话题

前言聊了那么多，都快忘记标题是什么了。

现在开始介绍position，这个样式有四种基本的属性分别是：static、absolute、relative、fixed、inherit。还有特殊的float。

最近好像还有flex很流行今天不讨论，flex好像内容很多,先预定下一篇吧?。

static，你不设置position的话，默认position定位static，所有标签（也可以理解为文档流自上而下从左到右）都按顺序（DOM）变成小框框。

fixed,也很简单你对一个标签设置position：fixed。先从视觉效果来讲，就是卡在浏览器的某个位置，无论浏览器的滚动条随便动他不动如山。从文档流来看，完全脱离文档流。

下面两个我理解的不够透彻，从菜鸟教程上复制的，括号里是自己的感想。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。（这个意思是相对的，相对于谁?相对于自己没设置position的位置。原本所占的空间仍保留还是在文档文档流里）

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。（绝对谁啊？绝对于浏览器）

~~现在举四种情况例子，分别是（fixed/absolute/relative/absolute+relative）。~~

1.fixed

<!--加style是为了让body/div/p更好的看出边界-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>postion</title>
</head>
<body id="pei">
	<style type="text/css">
	body{
		border:dotted 20px red;
		height: 1000px;
	}
	p{
		background-color: green;
		height: 200px;
		position: fixed;
		right: 0px;
		margin: 0;
		bottom:0px;
	}
	div{
		background-color: blue;
		border:solid black 20px;
		height: 300px;
	}
	</style>
	<div>我只是p的爸爸<p>我这个p被设置了fixed</p></div>
</body>
</html>