文档流定义与脱离文档流的操作

最新推荐文章于 2022-10-16 19:32:08 发布

iuukai

最新推荐文章于 2022-10-16 19:32:08 发布

阅读量299

点赞数

分类专栏： CSS html+css入门学习过程

本文链接：https://blog.csdn.net/weixin_45389633/article/details/103851131

版权

CSS 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

html+css入门学习过程

18 篇文章 1 订阅

订阅专栏

CSS中能够是元素脱离文档流的操作有如下：

1、float（只要设置浮动，则默认自带 display: inline-block;，可设宽高，且不占行）

2、position:absolute;绝对定位（只要设置绝对定位，则默认自带 display: inline-block;，可设宽高，且不占行）

3、position:fixed;固定定位 //IE6不兼容

👉👉👉传送门：CSS-文档流（Normal Flow）

文档流的定义：

行内元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局（这种就是默认布局）。

如下图所示：

①块级元素，以各自独占一行的布局，从上而下；

②行内元素，无论是在块级元素内，还是在body内，都是从左到右布局。

③默认情况下，如果不是父子级关系的块级元素和行内元素，是不可能同行布局的。（块级元素独自占一行，单个块级元素也会一行显示，但是不会占用一行，剩余的空间只给其他行内元素使用。）

在这里插入图片描述
代码测试：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档流（默认布局）</title> 
<style type="text/css">
    div{
        background-color: #CCFF00;
        border: 2px solid #000000;
    }
    p{
        background: #CC99FF;
        border: 2px solid #ffffff;
    }
    span{
        background-color: #6633FF;
    }
</style>
</head> 
<body>

    <div>我是块级元素div
        <p>我是块级元素p
            <span>我是行内元素span</span>
        </p>
        <p>我是块级元素p</p>
        <span>我是行内元素span</span>
        <span>我是行内元素span</span>
    </div>
    <div>我是块级元素div</div>
    <div>我是块级元素div</div>
    <p>我是块级元素p</p>
    <span>我是行内元素span</span>
    <span>我是行内元素span</span>
    <span>我是行内元素span</span>
    <span>我是行内元素span</span>
    <div>我是块级元素div</div>
    <span>我是行内元素span</span>
    <p>我是块级元素p</p>

</body>
</html>

下面是关于脱离文档流的操作

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>float脱离文档流</title> 
<style type="text/css">
    body{
        padding: 0px;
        margin: 0px;
    }
    .box1,.box2,.box3,.box4{
        width: 100px;
        height: 100px;
        color: #ffffff;
    }
    .box1{
        background-color: green;
    }
    .box2{
        background-color: pink;

    }
    .box3{
        background-color: red;
 		/*此处练习*/
		/*	float: right;	*/
		/*	position: absolute;		right: 0px;	*/
		/*	position: fixed;		right: 0px;	*/
    }
    .box4{
        background-color: blue;
    }
</style>
</head> 
<body>
    <div style="height:1000px;">
    <div class="box1">我是第一个块级元素</div>
    <div class="box2">我是第二个块级元素</div>
    <div class="box3">我是第三个块级元素</div>
    <div class="box4">我是第四个块级元素</div>
    </div>
</body>
</html>

一、使用float（浮动）来脱离文档流

在这里插入图片描述

二、使用`position:absolute;`（绝对定位）来脱离文档流

在这里插入图片描述

三、使用牛皮癣大法`position:fixed;`（固定定位）来脱离文档流

在这里插入图片描述

iuukai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文档流定义与脱离文档流的操作

CSS中能够是元素脱离文档流的操作有如下： 1、float 2、position:absolute;绝对定位 3、position:fixed;固定定位 //IE6不兼容文档流的定义：行内元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局（就是默认布局）。如下图所示： ①块级元素，以各自独占一行...
复制链接

扫一扫