目录
1、元素摆放布局非常不灵活，出现元素间高低不平，元素间底边对齐。如下：
一、概念
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>标签：网页,元素,摆放,如下,文档,缺陷,border,200px From： https://blog.csdn.net/2401_87197766/article/details/142849418