块级元素与行内元素

Posted 2020-10-04

标准文档流是指在没有CSS干预时各种元素的排列规则。在这种前提下，html文档中的元素可以分为两大类：块级元素和行内元素。
1.块级元素（block）独占一行，可以设定元素的宽和高。常见的块级元素有：
* html 文档的类型
* body 文档的内容
* h1-h6 一级标题到六级标题
* p 文章段落
* ul 无序列表
* li 定义列表项目
* ol 有序列表
* dl 定义列表
* dt 定义列表中的项目
* dd 定义列表中定义条目
* pre 定义预格式文本
* blockquote 大段引用
* div 划分区域区块
* figure 标签规定独立的流内容（图像、图表、照片、代码等等）
* video 链接视频
* audio 链接音频
* iframe 内联框架
* table 表格
* caption 表格标题
* thead 表头
* tbody 对表格中的主体内容进行分组
* tfoot 定义表格的页脚（脚注或表注）
* tr 定义表格中的行
* td 定义表格中的标准单元格
* th 定义表格中的表头单元格
* hr 横线
* form 表单
* article 标签的内容独立于文档的其余部分
* section 定义文档中的节
* aside 文档的侧栏
* header 页眉
* footer 页脚
* nav 定义导航链接的部分
* address 定义文档作者或拥有者的联系信息
* fieldset 在周围显示一个细边框的盒子
* legend 放在fieldset的内部，在盒子上加上一个标题
块级元素一般是其他元素的容器，可容纳块级元素和行内元素。

2.行内元素（inline）并排显示，不可以设置宽和高，width*height为auto*auto，高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有：
* a 标签定义超链接，用于从一张页面链接到另一张页面
* b 字体加粗
* strong 字体加粗，语气更强的强调
* br 换行
* abbr 定义缩写
* cite 引用书名、参考文献
* i 强调，斜体显示
* em 语气更强的强调，斜体显示
* q 定义短的引用，如诗歌
* label 标签，起交作用
* select 下拉列表
* small定义小号
* span 跨越多个字符
* sub定义下标文本
* sup定义上标文本
* textarea多行的文本输入控件
行内元素内一般不可以包含块级元素。

在有css干预的情况下，我们通过display属性来改变元素的显示方式。
例如：i是一个行内元素，现在我要把它作为一个视口来显示我的图标，并且后面要跟上名称，就要把它变成一个行内块元素（inline-block），这样既可以设置宽度和高度，又能让它以行内形式显示。
代码如下：
i{
display: inline-block;
width: 20px;
height: 20px;
background: url("img/xxx.jpg");
}