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> <h1>微笑是最初的信仰</h1> <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>
结果图
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论