块级元素和内联元素

发表于   |   分类于 ，   |  

块级元素和内联元素的定义

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘table’.

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

常见的块级元素和内联元素

块级元素列表

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

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

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

块级元素和行内元素的区别

  1. 块级元素各占一行，垂直排列，行内元素水平排列
  2. 块级元素可以包含行内元素，行内元素不能包含块级元素
  3. 行内元素无法设置宽度和高度，无法设置margin-top和margin-bottom,无法设置padding-top和padding-bottom

html标签的嵌套规则

  1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：

    <div><h1></h1><p></p></div> —— 对
<a href=”#”><span></span></a> —— 对
<span><div></div></span> —— 错

  2. 块级元素不能放在 <p>里面：

    <p><ol><li></li></ol></p> —— 错
<p><div></div></p> —— 错

  3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

    h1、h2、h3、h4、h5、h6、p、dt

  4. li 内可以包含 div 标签 —— 这一条其实不必单独列出来的，但是网上许多人对此有些疑惑，就在这里略加说明：

    li 和 div 标 签都是装载内容的容器，地位平等，没有级别之分（例如：h1、h2 这样森严的等级制度^_^），要知道，li 标签连它的父级 ul 或者是 ol 都 可以容纳的，为什么有人会觉得 li 偏偏容纳不下一个 div 呢？别把 li 看得那么小气嘛，别看 li 长得挺瘦小，其实 li 的胸襟很大 滴……

  5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：

    <div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错

参考文章：

http://blog.csdn.net/sykent/article/details/7738408
http://www.jb51.net/web/218553.html
http://www.5icool.org/a/201308/a2081.html