css中display和inline-block的一些理解

一、display常用属性：

1、none ：此元素不会被显示，位置都消失，看不见摸不到；

2、block：将元素设置为块级元素；

3、inline：将元素设置为内联元素；

4、inline-block：将元素设置为内联块级元素（本文重点讨论）；

二、将元素设置为inline-block后有几个特殊的现象：



上图中可以看出，三个inline-block元素的排列方式好像和想象的不太一样：

1、两个相邻元素的右侧和下侧有间距！

2、有内容的元素和无内容的元素的对齐方式不一样：都是无内容的三个元素会对齐，都是有内容的三个元素也会对齐！

三、现象原因：

1、这个原因空白space是由换行或回车所产生空白符所致，

例如：<div></div>

<div></div>

这么书写代码就会出现有间距的问题。

下侧的空白是因为基线和底线间的距离没有渲染。

2、有内容和无内容的元素渲染方式不同：

无内容的元素，默认从基线向上渲染图形；

有内容的元素，默认从cantent框的下侧对准基线向两侧渲染。

四、解决办法：

1、既然是字符当然无法摆脱font的控制，可以将父元素的font-size设置成0来解决，不过子元素的font-size属性就要从新设置了；

在书写代码的时候使用<div>        等去掉空格来解决，不过这样影响代码可读性；

</div><div></div>

可以通过margin来解决这个问题，不过margin也有副作用；

2、既然对齐基线的渲染有区别，那么就使用vertical-align属性，将元素们设置为top向顶线对齐或者bottom与底线对齐。

解释不对或者不细致的地方，希望各路大神指点！