在我们遇到的 HTML 元素中,有的标签元素如<div>、<p>等在浏览器中加载时必须独自占满一行,有的标签元素如<a>、<span>等则不会独占一行,原因是什么呢?
标准文档流
- 标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。前面内容发生了变化,后面的内容位置也会随着发生变化。
- HTML就是一种标准文档流文件。
- HTML中的标准文档流特点通过两种方式体现:微观现象和元素等级。
微观现象
①空白折叠现象。
②文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
③自动换行,元素内一行内容写满元素的 width 时会自动进行换行。
元素等级
- 在标准流中,大部分元素是区分等级的,习惯将元素划分为几种常见的加载级别: 块级元素、行内元素、行内块元素等。
- 块级元素:大部分容器级标签包括p标签都是块级元素,比如<div>、<h1>等。
- 行内元素:大部分的文本级标签,比如<span>、<a>、<b>等。
- 行内块元素:比如<img>、<input>等。
- 各种等级的元素有自己的加载特点。
块级元素
a、块级元素可以设置宽高,在浏览器中正常加载。
b、块级元素必须独占一行,不能与其他任何标签并排一行。
c、块级元素如果不设置宽度,会自动撑满父级的 width 区域;高度不设置,会被内容自动撑开高度。
行内元素
a、行内元素不能正常加载宽度和高度属性,其他的盒模型属性虽然能设置,但是容易出现加载问题。
b、行内元素可以与其他的行内或行内块元素并排一行显示。
c、行内元素不论是否设置宽高,宽度和高度都只能被内容自动撑开。
行内块元素
a、行内块元素可以设置宽度和高度。
b、行内块元素可以与其他的行内或行内块并排一行显示。
c、行内块元素如果不设置宽高,要么以原始尺寸加载要么被内容自动撑开。
d、行内块依旧具有标准流的微观性质,例如空白折叠现象。