一、首先要了解什么是块级元素与行级元素

> - 块级元素
会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，
设置了width后同样也占领一行、同样也可以设置   margin与padding属性。
ps:常见的块级元素:div,img,ul,form,p等
> - 行级元素
与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。
ps：em，strong，br,input等

二、display:inline

display:inline 元素显示为行内元素。
元素都使用默认高度，高度，行高以及底边距不可改变，
高度就是内容文字或者图片的宽度，不可以改变，你设置了也没有效果。
不强制换行,可以横向并排几个。
多个相邻的行内元素排在同一行里，直到页面一行排列不下，才会换新的一行。

三、display:block

display:block  元素显示为块级元素。
元素默认情况下独占一行（就像元素前后都给加了一个换行），可以设置宽度、高度、以及内外边距。
是强制换行的,下一个元素,会自动换行到这个下面排列,不会横向并排。

四、display:block

display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此。
既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高。
将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。
比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，
在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

PS : 有遗漏的细节请留言。