一张图片引出系列问题
请问你从这段图片中看到什么 ?
分析
看到这张图片 , 脑子就需要立即呈现出大体的代码
看到这张图片 , 脑子就需要立即呈现出大体的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 块级元素 -->
<div style="border: 1px solid black;">div1</div>
<div style="border: 1px solid red;">div2</div>
<!-- 行内元素 -->
<sapn>这是一张图片</sapn>
<img src="https://th.bing.com/th/id/R.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0">
</body>
</html>
我们可以看到在这里面分为块级元素和行内元素
-
块元素（block）
-
布局特点：从新行开始，占整行宽度，用于构建页面主要结构，像堆积木般划分不同区域，方便分区控制布局。
-
嵌套规则：可包含其他块级元素和行内元素，嵌套时需注意语义与布局合理性。
-
常见元素应用：
<div>：无特定语义，用于划分页面区域，便于 CSS 样式设计。<p>：表示段落，自动处理段落间距，使文章易读。<h1>-<h6>：表示文档层次结构，供搜索引擎理解内容重要性。<ul>、<ol>及<li>：分别用于创建无序列表、有序列表及列表项，展示信息点或步骤等。<table>：展示表格数据，常用于财务报表、比赛成绩等页面。<form>：创建表单，用于用户输入信息，如登录、注册表单等。
-
-
行内元素（inline）
-
布局特点：在同一行内呈现，占内容所需宽度，能灵活融入文本。
-
嵌套规则：不能包含块级元素，但可包含其他行内元素，可嵌套创建复杂文本样式。
-
常见元素应用：
<span>：通用行内元素，用于对文本小部分应用样式。<a>：创建超链接，可链接到多种目标。<strong>、<em>：分别用于表示重要内容（加粗显示）和强调内容（斜体显示）。<img>：插入图像，需设置来源及替代文本属性。<br>：强制换行，与<p>元素换行效果不同。<input>：在表单中创建各种输入框，设置不同属性实现不同输入功能。
-
铺垫完上面的知识后 , 再来看看这张照片
思考一下这些问题 :
- 问题一 ： div1 和 div2 为什么各自独占一行 ?
- 问题二： 文字 "这是一张图片" 和右边这张图片为什么在同一行 ？
- 问题三： 为什么文字 "这是一张图片" , 与图片的底部在同一行 , 怎么不能和图片的头部在同一行 ?
解答
- 问题一二思考方向 ：块级元素和行内元素
- 问题三思考方向 ： 行内元素的特性
块级元素部分：
可以看到有两个div块级元素。每个div都独占一行，就像图中所示，div1在最上面一行完整占据，div2则在div1下方新起一行也完整占据，这体现了块级元素在文档流中会各自占据新的一行且尽可能占满水平宽度的特点。
行内元素部分：
有一个span标签下的写着 “这是一张图片” 和一个img元素对应的图片。起初，它们会按照代码顺序在同一行依次排布，就如同在图中示意的，文字在左边，图片紧跟在文字右边尝试放置在同一行。
然而，由于图片是按照自身像素点进行绘制的，当一行的空间明显不够容纳图片时（比如图片太宽），图片就会自动换行进行多行绘制，图中可看到图片换到了下一行甚至可能更多行来完整显示自身。
此时，因为span标签和img标签属于行内元素，它们在逻辑上是同一行的排列单元，在图片换行后，原本所在行并没有排满（类似栅格中列没占满），所以span标签就会跟着到图片最末尾那一行，也就是在图中会显示文字在图片最后一行的末尾位置继续排列，以此来维持行内元素布局的连贯性。
