css样式脱离标准文档流

最新推荐文章于 2024-10-20 22:26:04 发布

王云召

最新推荐文章于 2024-10-20 22:26:04 发布

阅读量1.4k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/wangyunzhao007/article/details/91129096

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

元素脱离标注文档流之后，将不再在标准流中占据空间，而是处于浮动状态。离标准文档流的元素的定位基于正常的标准文档流，当一个元素脱离标准文档流后，依然在标准文档流中的其他元素将忽略该元素并填补其原先的空间。

脱离方式有两种：

1.float

没有浮动前的代码和效果图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            border: 1px solid red;
			background-color :red;
        }
        .two {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
			background-color :blue;
        }
    </style>
</head>
 
<body>
 
<div class="one">张三</div>
<div class="two">李四</div>
 
</body>

加上浮动后代码和效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width: 200px;
            height: 200px;
            border: 1px solid red;
			background-color :red;
			float:right;
        }
        .two {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
			background-color :blue;
        }
    </style>
</head>
 
<body>
 
<div class="one">张三</div>
<div class="two">李四</div>
 
</body>

2..定位

绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

代码和效果如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {

		    position: absolute;
			left: 30px;
			top: 20px;
            width: 200px;
            height: 200px;
            border: 1px solid red;
			background-color :red;

        }
        .two {

            width: 200px;
            height: 100px;
            border: 1px solid blue;
			background-color :blue;

        }
    </style>
</head>
 
<body>
 
<div class="one">张三</div>
<div class="two">李四</div>
 
</body>

相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点（上一个标签或者元素）进行移动。但是相对定位在元素脱离标准流后，其后元素不会补齐，脱离标准文档流的位置会被空出来。

代码和效果如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
		    position: relative;
		    left: 30px;
		    top: 20px;
            width: 200px;
            height: 200px;
            border: 1px solid red;
			background-color :red;
        }
        .two {
            width: 200px;
            height: 100px;
            border: 1px solid blue;
			background-color :blue;
        }
    </style>
</head>
 
<body>
 
<div class="one">张三</div>
<div class="two">李四</div>
 
</body>