行内元素与块级元素区别-蒲公英云

行内元素与块级元素区别

行内元素

行内元素是在一行进行展示的元素，在HTML的流式布局范围内，若在可视范围内一行不能全部展示则会自动换行。

行内元素不能设置高宽。

行内元素设置样式display:block即可转换为块级元素。

块级元素

块级元素会完全占据一行，后面跟随的元素则会换行后在进行展示。

块级元素列表

定义地址

定义表格标题

<dd>

定义列表中定义条目

<div>

定义文档中的分区或节

<dl>

定义列表

<dt>

定义列表中的项目

定义一个框架集

<form>

创建 HTML 表单

<h1>

定义最大的标题

<h2>

定义副标题

<h3>

定义标题

<h4>

定义标题

<h5>

定义标题

<h6>

定义最小的标题

<hr>

创建一条水平线

元素为 fieldset 元素定义标题

<li>

标签定义列表项目

为那些不支持框架的浏览器显示文本，于 frameset 元素内部

定义在脚本未被执行时的替代内容

<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>	定义变量

可变元素素列表—可变元素为根据上下文语境决定该元素为块元素或者内联元素

<button>	按钮
<del>	定义文档中已被删除的文本
<iframe>	创建包含另外一个文档的内联框架（即行内框架）
<ins>	标签定义已经被插入文档中的文本
<map>	客户端图像映射（即热区）
<object>	object对象
<script>	客户端脚本

demo

Center

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
        <style type="text/css">
            input{
                width:500px;
            }
            div{
                margin:5px 0px;
                width:500px;
                border:1px solid #888888;
            }
        </style>
    </head>
    <body>
        <input type="text" value="行内元素">
        <input type="text" value="行内元素">
        <input type="text" value="行内元素">
        <div>块级元素</div>
        <div>块级元素</div>
        <input type="text" value="转换为块级元素的行内元素" style="display:block;">
        <input type="text" value="转换为块级元素的行内元素" style="display:block;">
        <div>块级元素</div>
        <div>块级元素</div>
    </body>
</html>