在前端开发过程中，块级元素与内联元素的区别与转换是必须要掌握的内容。因为如果不熟悉html中哪些元素是块级元素，哪些元素是内联元素，写入css时难免会遇到这样那么的问题。
常见的块级元素(block)：
- <div>最常用的块级元素
- <h1>-<h6>标题标签
- <p>段落标签
- <ul>无序列表标签
- <ol>有序列表标签
- <li>定义列表项目标签
- <form>创建表单元素标签
其他块状元素：
- <address>定义地址标签
- <caption>定义表格标题标签
- <dd>定义列表中定义条目标签
- <dl>定义列表标签
- <dt>定义列表中的项目标签
- <fieldset>定义一个框架集标签
- <hr>水平线标签
- <legend>给fieldset元素定义标题标签
- <noframes>为那些不支持框架的浏览器显示文本，放置于frameset标签内
- <noscript>为那些不支持脚本的浏览器显示文本
- <pre>定义预格式化文本
- <table>定义表格
- <tbody>定义表格主体
- <td>表格中的标准单元格
- <tr>表格中的行
- <tfoot>表格中的页脚
- <th>定义表头单元格
- <thead>定义表格的表头
常见的内联元素（行内元素）(inline)：
- <a>a标签定义超链接或者锚点
- <img>向网页中嵌入一张图像
- <span>组合文档中的行内元素
- <strong>语气更强的强调内容
- <input>输入框
其他内联元素：
- <abbr>表示一个缩写形式
- <acronym>表示只取title中首字母的缩写形式
- <b>字体加粗
- <bdo>可覆盖默认的文本方向
- <big>大号字体加粗
- <br>换行
- <cite>引用进行定义
- <code>定义代码文本
- <dfn>定义一个定义项目
- <em>定义为强调的内容
- <i>斜体文本效果
- <kbd>定义键盘文本
- <label>为input进行标记/标注
- <q>定义短的引用
- <s>表示不准确不相关，却不应当给予删除的内容
- <samp>定义样本文本
- <select>定义单选或者多选菜单
- <small>呈现小号字体效果
- <sub>定义下标文本
- <sup>定义上标文本
- <textarea>多行文本输入控件
- <tt>打字机或者等宽的文本效果
- <var>定义变量
TIPS：<input>和<img>都是行内元素，但是它们是可以设置宽和高的。
块级元素与内联元素的区别
块状元素：
1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
2、块级元素可以设置宽高
3、块级元素可以设置margin，padding
内联元素：
1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
2、内联元素不可以设置宽高
3、内联元素可以设置但只在水平方向有效：margin-left、margin-right、padding-left、padding-right
4、代码换行，盒子之间会产生间距
5、子元素是内联元素，父元素可以用 text - align 属性设置子元素水平对齐方式
块级元素与内联元素之间的转换
块级元素与内联元素之间用display标签进行转换
display属性主要是设置元素的类型及隐藏的，常用的属性有：
- display:none 元素隐藏而且不占位置
- display:block 元素以块级元素显示
- display:inline 元素以内联元素显示
- display:inline - block 元素以内联块元素显示
也就是说块级元素可以通过display:inline 元素以内联元素显示、或者display:inline - block 元素以内联块元素显示
而内联元素可以通过display:block 元素以块元素显示
