HTML中块级元素和行内元素（又叫内联元素）

转载一篇阿秋阿邱的博客作为记录
HTML中块级元素和行内元素的总结和区分。
还参考了一下Qingqiu_Gu和晴天神乐的博客的内容
块级元素和行内元素
详解css中的display属性（行内元素和块级元素）

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

---

块级元素？

• 总是在新行上开始；
• 高度，行高以及外边距和内边距都可控制；
• 宽度缺省是它的容器的100%（和父元素的宽度一致），除非设定一个宽度。
• 它可以容纳内联元素和其他块元素

行内元素？

• 和其他元素都在一行上；
• 宽度就是它的文字或图片的宽度，不可改变
• 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

• 设置宽度width 无效。
• 设置高度height 无效，可以通过line-height来设置。
• 设置margin 只有左右margin有效，上下无效。
• 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围（上下）的内容是没影响的。

在html中，<span>、<a>、<label>、<input>、<img>、<strong> 和<em>就是典型的行内元素（inline）元素。
块级元素是可以设置宽高的，但是它的实际宽高是本身宽高+padding。block元素要单独占一行。内联元素不单独占一行，给他设置宽高是没有用的。
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。

块级元素和行内元素的分类

---

在HTML的角度来讲，标签分为：

• 文本级标签：p , span , a , b , i , u , em
• 容器级标签：div , h系列 , li , dt ,dd

p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。
　　　　
　从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

• 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。
• 块级元素：所有的容器级标签，都是块级元素，以及p标签。
  
  　　　　
  html中的块级元素：

标签	描述
<address>	定义地址。
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<blockquote>	定义长的引用。
<canvas>	定义图形。
<caption>	定义表格标题。
<dd>	定义定义列表中项目的描述。
<div>	定义文档中的节。
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<details>	定义元素的细节。
<fieldset>	定义围绕表单中元素的边框。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<footer>	定义 section 或 page 的页脚。
<form>	定义供用户输入的 HTML 表单。
<h1> to	定义 HTML 标题。
<header>	定义 section 或 page 的页眉。
<hr>	定义水平线。
<legend>	定义 fieldset 元素的标题。
<li>	定义列表的项目。
<menu>	定义命令的列表或菜单。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<noframes>	定义针对不支持框架的用户的替代内容。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<ol>	定义有序列表。
<output>	定义输出的一些类型。
<p>	定义段落。
<pre>	定义预格式文本。
<section>	定义 section。
<table>	定义表格。
<tbody>	定义表格中的主体内容。
<td>	定义表格中的单元。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<tr>	定义表格中的行。
<ul>	定义无序列表。

html中的行内元素：

标签	描述
<a>	定义锚。
<abbr>	定义缩写。
<acronym>	定义只取首字母的缩写。
<b>	定义粗体字
<bdo>	定义文字方向。
<big>	定义大号文本。
<br>	定义简单的折行。
<button>	定义按钮 (push button)。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<command>	定义命令按钮。
<dfn>	定义定义项目。
<del>	定义被删除文本。
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<i>	定义斜体字。
<img>	定义图像。
<input>	定义输入控件。
<kbd>	定义键盘文本。
<label>	定义 input 元素的标注。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<objec>	定义内嵌对象。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<samp>	定义计算机代码样本。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<span>	定义文档中的节。
<strong>	定义强调文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<textarea>	定义多行的文本输入控件。
<tt>	定义打字机文本。
<var>	定义文本的变量部分。
<video>	定义视频。
<wbr>	定义可能的换行符。