一次次想要放弃，又一次次挣扎着站起来。
文章内容输出来源：拉勾教育大前端就业集训营
1.引言
- 问题：在我们遇到的HTML元素中，有的标签元素如<div>、<p>等在浏览器中加载时必须独自占满一行，有的标签元素如<a>、<span>等则不会独占一行，原因是什么?
- 答：因为HTML文件是标准文档流文件。
2.标准文档流
- 定义：指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
- HTML文件是标准文档流文件。
- HTML中的标准文档流特点通过两种方式体现:微观现象和元素等级。
3.微观现象
- 空白折叠现象：文字or类似文字的元素之间的，n个空格、换行、缩进，在浏览器上只会展示为1个空格。
- 文字类元素如果排在一行会出现高低不齐，底边对齐的效果。
- 自动换行：元素内一行内容写满元素的width时会进行自动换行。
4.元素等级
- 概述：在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素，行内元素，行内块元素等。
- 块级元素：大部分容器级标签包括p标签都是块级元素，比如div，h1等。
- 行内元素：大部分的文本级标签，比如span，a，b等。
- 行内块元素：综合上面两个的特点，img、input等。
下面会对每一个级别的元素进行详细叙述~
5.块级元素
- 块级元素可以设置宽高，在浏览器中正常加载。
- 块级元素必须独占一行，不能与其他任何标签并排一行。
- 块级元素如果不设置宽度，会自动撑满父级的 width 区域;高度不设置，会被内 容自动撑开高度。
6.行内元素
- 行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
- 行内元素可以与其他的行内或行内块元素并排一行显示。
- 行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。
7.行内块元素
- 行内块元素可以设置宽度和高度。
- 行内块元素可以与其他的行内或行内块并排一行显示。
- 行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
- 行内块依旧具有标准流的微观性质，例如空白折叠现象。
8.显示模式——display
- 概述：标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式（元素等级）。
- 属性值：元素根据属性值的不同，可以加载对应元素等级的显示模式的特点。
| 属性值 | 作用 |
|---|---|
| block | 表示元素要以块级元素模式加载，具备块级元素特点 |
| inline | 表示元素要以行内元素模式加载，具备行内元素特点 |
| inline-block | 表示标签要以行内块元素模式加载，具备行内块特点 |
| none | 表示标签及内部内容直接隐藏，让出原有标准流位置 |
none：相当于完全隐藏，不仅内容不显示，而且位置也会让给其他的元素进行使用。
9.脱离标准流
- 概述：display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
- 标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。
后面的章节会对这些脱离标准流的方法进行讲解，目前了解即可~
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，诸君共勉！
网友评论