inline,block,inline-block

display:block 将元素显示为块级元素

总是从新行开始并独占一行，而且也会导致后面紧邻的非块级元素从新行开始。

width，height和顶、底边距都可控；

<div> , <p>,<h1>,<form>,<ul>,<li>是块元素的例子。

默认情况下:块级元素自动填满其父元素宽度。

 

display:inline 是将元素显示为行内元素.

和其他行内元素都在一行上；

width,height以及顶和底边距不可改变；

宽度就是它的内容的宽度，不可改变，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行。

<span>,<a>,<label>,<input>,<img>,<strong>,<em>是inline的例子

下面的情况，可以切换inline和block：

让一个inline元素从新行开始

让块元素和其他元素保持在一行上

控制inline元素的宽度、高度

无须设定宽度即可为一个块元素设定与文字同宽的背景色。

 

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。

准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性