网页文档流的概念和缺陷

小k鏖

已于 2024-10-11 22:33:25 修改

阅读量210

点赞数 4

文章标签：前端 html css

于 2024-10-11 22:31:44 首次发布

本文链接：https://blog.csdn.net/2301_79765198/article/details/142864026

版权

网页文档流的概念

网页文档流是一种基本的布局机制，它是浏览器解析CSS的一种方式，用来确定网页上的元素应该如何排列。在文档流中，元素依据HTML代码的书写顺序进行布局——块级元素自上而下依次排列，每一行只容纳一个块级元素；内联元素则在同一行中从左到右排列，直至该行填满再换行。

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

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

运行结果

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

<head>
    <style>
        img{
            width: 248px;
            height: 361px;
            border: 5px gray solid;
        }
    </style>
</head>
<body>
   <img src="D:\图片\夏日饮品.jpg" id="img1">
   <img src="D:\图片\夏日饮品.jpg" id="img2">
   <img src="D:\图片\夏日饮品.jpg" id="img3">
</body>

运行结果

二、缺陷

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

<head>
    <style>
        img{
            width: 248;
            height: 361;
            border: 2px green solid;
        }
    </style>
</head>
<body>
    <b>我是加粗文本</b>
    <img src="D:\图片\夏日饮品.jpg" >
    
</body>

运行结果

2、文本空格折叠，
即使代码中有很多空格，但在网页显示中只有一个空格，如下：

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

运行结果

3、元素间间隙过小的现象,如下：

<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 6px green solid;
            background-color: gray;
        }
        img{
            width: 248px;
            height:361px;
            border: 5px gray solid;
 
        }
    </style>
</head>
<body>
    <div></div>
    <b>我是加粗文本</b><br>
    <img src="D:\图片\夏日饮品.jpg" >
    
</body>

运行结果