块级元素、行内元素和行内块元素

一、块级元素

   块级元素：可以设置宽高、行高和内外间距，会独占一行，宽度默认等于父元素宽度，可容纳其他块级元素和行内元素

   块级元素主要有

 <div>         //定义文档中的分区或节
 <address>     //定义地址 
 <hr>          //创建一条水平线 
 <noframes>    //为那些不支持框架的浏览器显示文本，于 frameset 元素内部
 <noscript>    //定义在脚本未被执行时的替代内容
 <pre>         //定义预格式化的文本

//----------标题段落相关
 <p>         //标签定义段落 
 <h1>        //定义最大的标题
 <h2>        // 定义副标题
 <h3>        //定义标题
 <h4>        //定义标题
 <h5>        //定义标题
 <h6>        //定义最小的标题

//----------表单相关
 <form>        //创建 HTML 表单 
 <fieldset>    //定义一个框架集，把一些表单元素分类
 <legend>    //给外层加上边框和名字
 
//----------列表相关（有序、无序、自定义列表）
 <ol>        //定义有序列表
 <ul>        //定义无序列表
 <li>        //标签定义列表项目

 <dl>        //定义列表，自定义列表
 <dt>        //定义列表中的项目
 <dd>        //定义列表中定义条目 

//----------表格相关
 <caption>   //定义表格标题

 <table>     //标签定义 HTML 表格 

 <thead>     //标签定义表格的表头
 <th>        //定义表头单元格

 <tbody>     //标签表格主体（正文）
 <tr>        //定义表格中的行
 <td>        //表格中的标准单元格

 <tfoot>     //定义表格的页脚（脚注或表注）

表格、列表、段落、标题有关的都是块级元素

二、行内元素

   行内元素的特点：不能直接修改宽高，元素会默认排在一行，排不下了再换行，可以设置左右的内外边距，上下的不行，宽高默认是内部文本或图片的大小

   常见的行内元素：

 <a>         //标签可定义锚 
 <span>      //组合文档中的行内元素
 <img>       //向网页中嵌入一幅图像

 <input>     //输入框
 <label>     //标签为 input 元素定义标注（标记）
 <select>    // 创建单选或多选菜单
 <textarea>     //多行的文本输入控件

 <em>        //定义为强调的内容
 <i>         //斜体文本效果
 <strong>    //加粗
 <cite>      //引用进行定义
 <br>        //换行 

 <big>       //大号字体加粗
 <small>     //呈现小号字体效果
 <b>         //字体加粗

 <sub>     //定义下标文本
 <sup>     //定义上标文本

 <abbr>     //表示一个缩写形式 
 <acronym>     //定义只取首字母缩写 
 <bdo>     //可覆盖默认的文本方向 
  
 <code>    // 定义计算机代码文本
 <dfn>     //定义一个定义项目
 
 <kbd>     //定义键盘文本
 
 <q>     //定义短的引用
 <samp>     //定义样本文本
 
 <tt>     //打字机或者等宽的文本效果
 <var>    // 定义变量

  大部分表单元素是行内元素

三、行内块元素

  行内块元素特点：默认在一行排列，可以设置宽高，如input和img

四、相互转化

   转化为块级元素：display: block

   转化为行内元素：display: inline

   转化为行内块元素：display: inline-block