inline-block水平布局，部局紊乱问题

问题：

inline-block盒子布局紊乱

原因及决绝办法：

出现这个问题的原因归根结底就是inline-block的特性，两个inline-block之间的布局类似两个行内元素，但是可以设置width，height，上下margin。。。类似行内元素布局，两个inline-block元素并排时，没有写明vertical-align时，默认是以baseline对齐的，而inlineblock元素的baseline在哪里就要分有文字和没文字的情况，没有文字的情况baseline就是“margin-bottom的那条线”！！！！！有文字的情况baseline就是“最后一行文本的baseline”！！！！理解以上两点（对齐方式和baseline在哪里），你就能知道为什么会出现这么奇怪的布局。最后，在css布局格式化里面，行内格式化是最最最难以理解的，把这个学通了，感觉基本的格式化布局都是小儿科，希望我的回答能够对楼主有帮助。