重新认识布局：标准流，浮动，定位的关系

本文首发于知乎：https://www.zhihu.com/people/xiao-chong-10-60

flex布局（2009年w3c提出）出来之前，PC端网页的布局方式（手段）有3种：

1）标准流

2）浮动

3）定位

其中，3者之间又有密不可分的关系。

1.相对定位与标准流

定位里最接近标准流的是相对定位，相对定位不脱标，依然保留在标准流里的位置。

除此之外，相对定位的元素没有像绝对定位那样具有行内块元素的特性。

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		span{
			position: relative;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<span>111</span>
</body>
</html>

　　

2.浮动和绝对定位

浮动和绝对定位是近亲，浮动有3个特性：

1）脱标

2）一行显示且顶端（父元素的顶端）对齐

3）浮动的元素具有行内块元素的特性

实际上，绝对定位具有1）和3）的特性：即脱标和具有行内块元素的特性。更深层次，因为脱标了才具有了行内块元素特性。

<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		span {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>

<body>
	<span>111</span>
</body>

</html>

　　

从上面看出：相对定位更接近于标准流，绝对定位和浮动比较类似。

我们布局中的技巧:子绝父相和这个也有关系，父元素相对定位，在标准流里占住位置，子元素绝对定位，参考父元素占住的位置进行移动，并且是脱标的。

利用浮动和绝对定位脱标（脱离标准流）的特性，我们可以轻松做出2栏布局(左侧宽度确定，右边占据剩余空间)：

浮动做法：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			overflow: hidden;
		}

		.left {
			float: left;
			width: 200px;
			height: 600px;
			background-color: pink;
		}

		.right {
			margin-left: 200px;
			height: 600px;
			background-color: skyblue;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>

</html>

　绝对定位做法：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			position: relative;
		}

		.left {
			position: absolute;
			left: 0;
			top: 0;
			width: 200px;
			height: 800px;
			background-color: pink;
		}

		.right {
			margin-left: 200px;
			height: 800px;
			background-color: skyblue;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>

</html>

　　

posted @ 2021-06-25 11:55  小虫1  阅读(225)  评论(0)    收藏  举报