博客转载于：https://blog.csdn.net/swebin/article/details/90405950
块级元素 block
块级元素，该元素呈现块状，所以他有自己的宽度和高度，也就是可以自定义width和Height，块元素独占页面的一行，可以作为容器使用，可以容纳块级元素和行内元素。块级元素有以下特点
- 每个块元素都独占页面的一行
- 高度和宽度是可以设置的
- 元素的宽度不设置的话默认为父元素的宽度
常见的块元素
<address>//定义地址 <caption>//定义表格标题 <dd> //定义列表中定义条目 <div> //定义文档中的分区或节 <dl> //定义列表 <dt> //定义列表中的项目 <fieldset> //定义一个框架集 <form> //创建 HTML 表单 <h1> //定义最大的标题 <h2> // 定义副标题 <h3> //定义标题 <h4> //定义标题 <h5> //定义标题 <h6> //定义最小的标题 <hr> //创建一条水平线 <legend> //元素为 fieldset 元素定义标题 <li> //标签定义列表项目 <noframes> //为那些不支持框架的浏览器显示文本，于 frameset 元素内部 <noscript> //定义在脚本未被执行时的替代内容 <ol> //定义有序列表 <ul> //定义无序列表 <p> //标签定义段落 <pre> //定义预格式化的文本 <table> //标签定义 HTML 表格 <tbody> //标签表格主体（正文） <td> //表格中的标准单元格 <tfoot> //定义表格的页脚（脚注或表注） <th> //定义表头单元格 <thead> //标签定义表格的表头 <tr> //定义表格中的行
行内元素
其不可以设置宽和高，可以与其他行内元素共位于页面的一行，行内元素一般不可以包含块级元素。行内元素的的宽度和高度一般被内容撑满，
行内元素有以下特点：
- 可以和其他行内元素共位于页面的一行，当放不下时则会换行
- 高度宽度行高底部边距不可以设置
常见的行内元素：
<a> //标签可定义锚 <abbr> //表示一个缩写形式 <acronym> //定义只取首字母缩写 <b> //字体加粗 <bdo> //可覆盖默认的文本方向 <big> //大号字体加粗 <br> //换行 <cite> //引用进行定义 <code> // 定义计算机代码文本 <dfn> //定义一个定义项目 <em> //定义为强调的内容 <i> //斜体文本效果 <img> //向网页中嵌入一幅图像 <input> //输入框 <kbd> //定义键盘文本 <label> //标签为 input 元素定义标注（标记） <q> //定义短的引用 <samp> //定义样本文本 <select> // 创建单选或多选菜单 <small> //呈现小号字体效果 <span> //组合文档中的行内元素 <strong> //加粗 <sub> //定义下标文本 <sup> //定义上标文本 <textarea> //多行的文本输入控件 <tt> //打字机或者等宽的文本效果 <var> // 定义变量
行内块级元素 inline-block
行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素，它可以设置高宽以及一行多个。具体特点如下：
- 和其他行内或行内块级元素元素放置在同一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
元素类型转换display
display：block ，定义元素为块级元素
display : inline ，定义元素为行内元素
display：inline-block，定义元素为行内块级元素。