本文小编为大家详细介绍“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 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 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 src="./img/001.png" > </body> </html>
结果图
读到这里，这篇“CSS标准文档流的基本原理是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
