CSS标准文档流的基本原理是什么
本文小编为大家详细介绍“CSS标准文档流的基本原理是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS标准文档流的基本原理是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
CSS标准文档流
标准文档流介绍
我们在制作HTML网页的时候，都必须遵循一个流的规则如：从左至右、从上至下规则。
让我们进入HTML网页的标准文档流基本原理实践。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标准文档流</title>
</head>
<body>
<h2>微笑是最初的信仰</h2>
<span>微笑是最初的信仰</span>
</body>
</html>结果图
标准文档流要注意的事项
空白折叠现象。
高矮不齐，底部对齐。
让我们进入空白折叠现象实践。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>空白折叠现象</title>
</head>
<body>
加
油
<img class="lazy" data-src="./img/001.png" >
</body>
</html>结果图
注意：咦结果图之间怎么有了空白的缝隙呢？是什么原因导致的呢？往下看。
我们现在将文本与文字之间换行和文本与图片之间换行先给去除掉实践。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>空白折叠现象</title>
</head>
<body>
加油<img class="lazy" data-src="./img/001.png" >
</body>
</html>结果图
咦现在文本与文本之间和文本与图片之间空白缝隙消失了， 现在大家应该知道了，空白缝隙是因为什么导致了，因为文本与文本之间和文本与图片之间存在换行现象，所以才有了空白缝隙。
让我们进入文档流高矮不齐，底部对齐的实践。
认真的园友肯定从上面一个实践中就已经发现了这个高矮不齐，底部对齐现象了。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>空白折叠现象</title>
</head>
<body>
加油<img class="lazy" data-src="./img/001.png" >
</body>
</html>结果图
读到这里，这篇“CSS标准文档流的基本原理是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
