CSS基础知识一（文档流）

@动感superman

于 2024-10-12 11:09:26 发布

阅读量153

点赞数 8

文章标签： css 前端 javascript html

本文链接：https://blog.csdn.net/2301_80208072/article/details/142871367

版权

1、文档流

文档流(Normal flow)也称为常规流，普通流。

从直观上理解，常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。

2.代码演示

2.1 块元素的文档流

块元素的文档流（自上而下流水线摆放），如下

代码如下：

    <style>

        div{
            width: 100px;
            height: 100px;
            background-color: rgb(128, 128, 128);
            border: 2px red solid;}
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

2.2 行内元素的文档流

行内元素的文档流（从左到右流水线摆放），如下：

代码如下：

    <style>

        div{
            width: 100px;
            height: 100px;
            background-color: rgb(128, 128, 128);}
    </style>
</head>

<body>
    <b>我是加粗文本</b>
    <b>我是加粗文本</b>
    <b>我是加粗文本</b>
    <b>我是加粗文本</b>
</body>
</html>

3.文档流缺陷

元素摆放布局非常不灵活，出现元素间高低不平，元素间底边对齐。如下：

代码如下：

    <style>

        div{
            width: 100px;
            height: 100px;
            background-color: rgb(128, 128, 128);
            border: 2px red solid;}
    </style>
</head>
<body>
    <b>我是加粗文本</b>
    <b>我是加粗文本</b>
    <b>我是加粗文本</b>
    <b>我是加粗文本</b>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>