持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情
-
小思考：在我们遇到的HTML元素中，有的标签元素如
<div>、<p>等在浏览器中加载时必须独自占满一行，有的标签元素如<a>、<span>等则不会独占一行，原因是什么？ -
原因：HTML是标准文档流文件，即元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级
-
微观现象：
① 空白折叠现象：在vscode所有编写的代码，换行会在网页中代替成空格显示
② 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果
③ 自动换行，元素内一行内容写满元素的width时会自动进行换行
-
元素等级：在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素（也称为内联元素）、行内块元素等
-
块级元素：大部分容器级标签包括p标签都是块级元素，比如
<div>、<h1~6>、<ul>、<ol>、<li>等，特点如下：-
块级元素可以设置宽高，在浏览器中正常加载
-
块级元素必须独占一行，不能与其他任何标签并排一行
-
块级元素如果不设置宽度，会自动撑满父级的width区域；高度不设置，会被内容自动撑开高度
-
-
行内元素：大部分的文本级标签，比如
<span>、<a>、<b>、<strong>、<em>、<i>等，特点如下：-
行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是内容出现加载问题
-
行内元素可以与其他的行内或行内块元素并排一行显示
-
行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开
-
-
行内块元素：比如
<img>、<input>、<td>等，特点如下：-
行内块元素可以设置宽度和高度
-
行内块元素可以与其他的行内或行内块并排一行显示
-
行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开
-
行内块依旧具有标准流的微观性质，例如空白折叠现象
-
-
