HTML 块级元素、行内元素、行内块元素详解
块级元素 和行内元素
1、 基本概念
在HTML5之前，HTML元素被分为两类：块级元素(block-level elements)和行内元素(inline-level elements)，或称为内联元素。
不过，因为这是一种表现特征，在HTML5时，在标准流中通过CSS属性display指定。（注释：表现特征，例如文字颜色，背景色等等和HTML的内容、JS的行为形成对比。以前，也许通过元素的类别决定元素的这种表现特征，不过现在可以通过CSS display属性进行控制。）
1、行内元素是那些只占用定义元素的标签所限定的空间的元素，而不是打破内容流。 2、块级元素占用其父元素(容器)的整个水平空间，以及与其内容高度相等的垂直空间，因此创建了一个“块”。
区别一：行内元素不从新行开始，只占用必要宽度；块级元素总是从新行开始，并占用其父元素的可用的全部宽度。
区别二： 块级元素可能包含行内元素，有时也包含其他块级元素，行内元素只能包含数据和其他行内元素。a元素例外，它可以包含块级元素，例如div。
2、行内元素和块级元素案例演示
行内元素
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
.highlight {
background-color: #ee3;
}
在这个案例中，
块级元素
将元素修改为块级元素，例如段落元素 ，代码如下所示 The following paragraph is a block-level element; its background has been colored to display both the beginning and end of the block-level element's influence.
.highlight {
background-color: #ee3;
}
可以看到差异，
元素完全地改变了文本的布局，将其分割为三部分：
元素前的文本，
元素本身包含的文本，
元素后的文本。
3、改变元素的等级
你可以通过CSS display属性改变一个元素的视觉表现，例如，通过把display的值从”inline“修改为”block"， 你可以指示浏览器以为块盒（block box）而不是行内盒（inline box）的方式渲染元素，反之亦然。然而，修改元素的display属性，例如把display属性值从“inline”修改为“block”或者从“block”修改为“inline"，并不会改变元素的类别和内容模型。例如，即使把span元素的display属性修改为”block“，它仍然属于行内元素并且不能内嵌div元素。内容模型概念接下来会介绍。
块级元素、行内元素、行内块元素的特点
1、块级元素（block）
块级元素，顾名思义，该元素呈现“块”状，所谓块状就是元素显示为矩形区域，主要用于网页布局和网页结构的搭建。它有自己的宽度和高度，也就是可自定义 width 和 height。除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。以下元素均为块级元素：
// 定义地址- // 定义列表
- // 定义列表中的项目
- // 定义列表中定义条目