1. display: block 将元素设置为块级元素。
2. display:inline 将元素设置为行内元素。
区别就是第2点中讲到的,一个是是否独占一行,一个是是否可设置宽高问题(img,input除外)。
display:inline-block 将元素设置成行内块级元素,兼容了两者的优点。
使得元素在同一行显示(不独占一行)的同时,又可以对它的宽高进行设置。
与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度。
同样,如果设置了 display: inline-block,将保留上下外边距/内边距,而 display: inline 则不会。
与 display: block 相比,主要区别在于 display:inline-block 在元素之后不添加换行符,因此该元素可以位于其他元素旁边。