display: inline | block | inline-block

HTML元素分为行内元素、块状元素和行内块状元素三种。

行内元素

特征：

1.和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
2.高度、宽度是不可控的，设置无效，由内容决定。

常见元素：

<span>、<a>、 <img>、 <input>、<textarea>、<select>、<label>

块元素

特征：

1.总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
2.高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
3.宽度没有设置时，默认为100%；
4.块级元素中可以包含块级元素和行内元素。

常见元素：

<div>、<table>、<form>、<p>、<ul>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

行内块元素

行内块状元素综合了行内元素和块状元素的特性：

特征：

1. 不自动换行，与其他行内元素都会在一条水平线上排列；
2. 高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
3. 默认排列方式为从左到右。

display 转换

使用display属性能够将行内元素和块级元素进行任意转换：

       (1)display:inline;  将任意元素转换为行内元素；

　　(2)display:block;  将任意元素转换为块元素；

　　(3)display:inline-block;  将任意元素转换为行内块元素。