HTML
HTML4 中，元素被分成两大类: inline(内联元素)与 block(块级元素)。但在实际的开发过程中，因为页面表现的需要，前端工程师经常把 inline 元素的 display 值设定为 block(比如 a 标签)，也经常把 block 元素的 display 值设定为 inline；之后更是出现了 inline-block 这一对外呈现 inline、对内呈现 block 的属性。因此，简单地把 HTML 元素划分为 inline 与 block 已经不再符合实际需求。
基于这种考虑，在 HTML5 中，标准制定者重新定义了 HTML 元素的分类，并根据这一新的分类定义了元素的内容模型(Content Model) – 对于一个元素而言，哪些子元素是合法的，而哪些子元素是非法的。
但是还是列一下出来，这个概念比 HTML5 中的分类容易理解得多。
块级元素
格式
默认情况下，块级元素会新起一行。
内容模型
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别代替。”块级“类别大致相当于 HTML5 中的流内容类别，而”行内“类别相当于 HTML5 中的措辞内容类别，不过除了这两个还有其他类别。
| 标签 | 说明 | 备注 |
|---|---|---|
<address> |
联系方式信息 | |
<article> |
文章内容 | HTML5 |
<aside> |
伴随内容 | HTML5 |
<audio> |
音频播放 | HTML5 |
<blockquote> |
块引用 | |
<canvas> |
绘制图形 | HTML5 |
<dd> |
定义列表中定义条目描述 | |
<div> |
文档分区 | |
<sl> |
定义列表 | |
<fieldset> |
表单元素分组 | |
<figcaption> |
图文信息组标题 | HTML5 |
<figure> |
图文信息组 (参照 ) | HTML5 |
<footer> |
区段尾或页尾 | HTML5 |
<form> |
表单 | |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
标题级别 1-6. | |
<header> |
区段头或页头 | HTML5 |
<hgroup> |
标题组 | HTML5 |
<hr> |
水平分割线 | |
<noscript> |
不支持脚本或禁用脚本时显示的内容 | |
<ol> |
有序列表 | |
<output> |
表单输出 | HTML5 |
<p> |
行 | |
<pre> |
预格式化文本 | |
<section> |
一个页面区段 | HTML5 |
<table> |
表格 | |
<tfoot> |
表脚注 | |
<ul> |
无序列表 | |
<video> |
视频 | HTML5 |
行内元素
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elements
- 内容
一般情况下，行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
- 格式
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
- b, big, i, small, tt
- abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
- a, bdo, br, img, map, object, q, script, span, sub, sup
- button, input, label, select, textarea
HTML5 中的分类方式
置换元素
深入前端之 replaced element https://juejin.cn/post/6844903775354748936
在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。
CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。有关详细信息，请参阅本文下面的控制内容框中的对象位置。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
典型的可替换元素有：
有些元素仅在特定情况下被作为可替换元素处理，例如：
HTML 规范也说了 <input> 元素可替换，因为 "image" 类型的 <input> 元素就像img一样被替换。但是其他形式的控制元素，包括其他类型的 input 元素，被明确地列为非可替换元素（non-replaced elements）。该规范用术语小挂件（Widgets）来描述它们默认的限定平台的渲染行为。
用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。
CSS
块级框
行内框
不允许设置宽和高
行内块级框
参考
参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements
http://blog.shaochuancs.com/w3c-html5-content-model/
https://www.zhihu.com/question/34952563
http://happylg.cn/2017/09/22/block-and-inline/