网页文档流的概念和缺陷

13 iug^

于 2024-10-11 14:12:43 发布

阅读量205

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2401_87197766/article/details/142849418

版权

一、概念

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

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

二、缺陷

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

2、文本空格折叠

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

一、概念

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: 200px;
            height: 200px;
            border: 5px gray solid;
        }
    </style>
</head>
<body>
   <img src="F:\Web前端开发技术\盒子\网页文档流的概念和缺陷\飞机.jpg" id="img1">
   <img src="F:\Web前端开发技术\盒子\网页文档流的概念和缺陷\飞机.jpg" id="img2">
   <img src="F:\Web前端开发技术\盒子\网页文档流的概念和缺陷\飞机.jpg" id="img3">
</body>

二、缺陷

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

代码如下：

<head>
    <style>
        img{
            width: 200px;
            height: 200px;
            border: 2px green solid;
        }
    </style>
</head>
<body>
    <b>我是加粗文本</b>
    <img src="F:\Web前端开发技术\盒子\网页文档流的概念和缺陷\飞机.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: 200px;
            height: 200px;
            border: 5px gray solid;

        }
    </style>
</head>
<body>
    <div></div>
    <b>我是加粗文本</b><br>
    <img src="F:\Web前端开发技术\盒子\网页文档流的概念和缺陷\飞机.jpg" >
    
</body>