行内元素、块级元素和置换元素、非置换元素

背景

看了很多的文章，很多文章把元素分为行内、行内块、块元素。但是img、input等又能设置宽高，有些文章归类于行内元素 ，有些归类于行内块元素，故而查看mdn文档。并没有行内块元素一说
[块级元素 - HTML（超文本标记语言） | MDN (mozilla.org)(https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_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

• supbutton, input, label, select, textarea

不可设置宽高的行内元素设置宽高

//三种方法
display;设置非inline的值
float:left/right
position:absolute; 

块级元素

块级元素默认的宽是容器的100%，可以设置宽和高，可以容纳其它块级元素或行内元素，并且独占一行。

块级元素：header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

块级元素和行内元素转换

块级元素=>行内元素转换

display:inline

行内元素转换 => 块级元素

//三种方法
display:非inline
float:left/right
position:absolute; 

行内元素img、input等可以设置宽高，按理说行内元素不可设置宽高，为了解释这个现象，需要引入另一个概念:

可替换元素和非替换元素

可替换元素

可替换元素mdn的解释：
在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 frame 元素，可能具有自己的样式表，但它们不会继承父文档的样式。
CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。

典型的可替换元素有：

<iframe>
<video>
<embed>
<img>  

某些特殊的条件下可以是替换元素，例如：input的type为image时。

<option>
<audio>
<canvas>
<object>
<applet>

非替换元素

展现效果是受css样式来控制的