元素类型分类 块状元素 内联元素 盒模型通过display转变样式 置换元素/替换元素

一、元素类型分类
块状元素，内联元素

二、块状元素
1）块级元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块级元素包含:
div p dl ol ul dt dd form fieldset h1-h6 hr table tr td colgroup col address (地址) blockquote (块引用) center (居中对齐) dir (目录列表)

2）默认情况下，块级元素都会占据一行，通俗地说，两个相邻块级元素不会出现并列显示的现象；默认情况下，块级元素会按顺序自上而下排列。
3）块级元素都可以定义自己的宽度和高度。
4）块级元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块级元素,我们把这种容器比喻为一个盒子。
5）一般来说，块元素如默认的宽度为父元素的宽，高度为零；在设置绝对定位absolute或浮动float后，及脱离文档流，其默认的高度为0，宽度也为0

三、内联元素
1）常见的内联元素
a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体
br - 换行 cite - 引用 q - 短引用
em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 var - 定义变量
kbd - 定义键盘文本 label - 标签 s - 中划线(不推荐)
small - 小字体文本 sub - 下标 tt - 电传文本
select - 项目选择 strong - 粗体强调 u - 下划线
strike - 中划线 sup - 上标
textarea - 多行文本输入框
code - 计算机代码(在引用源码的时候需要)
span - 常用内联容器，定义文本内区块
samp - 定义样本文本
dfn- 是Definition(定义)的缩写,对特殊术语或短语的定义可以用 括起来，浏览器通常用斜体显示;此标签很少被使用。
2）内联级元素在一行内逐个显示；
3）内联级元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
4）内联级元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示(margin,padding border上下显示效果不正确);
四、display
盒子模型可通过display属性来改变默认的显示类型

display属性的值为block，list-item，table，flex的元素都是块级元素；

display属性的属性值为inline，inline-table，inline-block，inline-flex的元素都是内联级元素；

五、置换元素/替换元素
一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
置换元素就是浏览器根据元素的属性，来决定元素的具体显示内容。
例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；
例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。
HTML中的img、input、object都是替换元素。

非置换元素/不可替换元素
HTML的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）
例如：span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 hello word