CSS文档流及其缺陷

wp2023090222

码龄3年

关注

原创最新推荐文章于 2026-04-13 17:06:58 发布 598 阅读 GEO检测

摩擦纳米发电机测试系统全解析：从硬件配置到软件控制本文全面解析摩擦纳米发电机（TENG）测试系统，涵盖硬件配置、软件控制及系统集成。详细介绍NI USB-6003等采集卡的选择与使用，以及一体化控制软件的功能与优势，帮助研究人员高效评估纳米材料发电性能。系统支持自动测试与数据分析，显著提升测试效率与准确性。阅读详情

一、文档流

文档流是Web开发中CSS的基本布局机制，它描述的是HTML元素在页面上自然的排列顺序。每个元素都有一个默认的放置位置，通常是从上到下，从左到右，形成一种线性的堆叠结构。这种堆叠是由块级元素自上而下占用整个宽度，内联元素则沿行依次排列的原则决定的。

1、块元素的文档流（自上而下）

<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: gray;
            border: 3px red solid;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>

2、行内元素的文档流（从左到右）

<head>
    <style>
        img{
            width: 200px;
            height: 200px;
            background-color: gray;
            border: 3px red solid;
        }
    </style>
</head>
<body>
    <img src="G:\web\HTML\图片，超链接\2017-09-19-06-57-32.jpg" alt="">
    <img src="G:\web\HTML\图片，超链接\2017-09-19-06-57-32.jpg" alt="">
    <img src="G:\web\HTML\图片，超链接\2017-09-19-06-57-32.jpg" alt="">
</body>

二、文档流的缺陷

1、布局不灵活，排版混乱

<head>
    <style>
        img{
            width: 200px;
            height: 200px;
            background-color: gray;
            border: 3px red solid;
        }
    </style>
</head>
<body>
    <b>我是一段介绍文档流的文本。</b>
    <img src="G:\web\HTML\图片，超链接\2017-09-19-06-57-32.jpg" alt="">
</body>

2、文本空格折叠（即输入多个空格，但只输出一个空格。）

<head>
</head>
<body>
    <b>我是一段        介绍文档流的文本。</b>
</body>

#这种情况下我们可以使用HTML实体字符   来代替空格。

<head>
</head>
<body>
    <b>我是一段        介绍文档流的文本。</b>
    <b>我是一段&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;介绍文档流的文本。</b>
</body>

3、元素间隙过小，导致整体不美观

<head>
    <style>
        img{
            width: 200px;
            height: 200px;
            background-color: gray;
            border: 3px red solid;
        }
        div{
            width: 200px;
            height: 200px;
            background-color:blue;
            border: 5px green solid;
        }
    </style>
</head>
<body>
    <div></div>
    <b>我是一段介绍文档流的文本。</b><br>
    <img src="G:\web\HTML\图片，超链接\AIwBCAAQAhgAIPbX1-YFKK2hw88EMNYiOP8W.jpg" alt="">
</body>