先梳理一下看懂这篇文章需要的基础知识：

1.html里主要有块元素和行内元素。块元素默认从上到下排列，行内元素默认水平排列。当然我们布局主要用到的div是块元素，对于div元素默认从上到下排列这个属性，显然不是我们想要的，我们需要通过加一些控制语句来改变它的属性。

2.display是css里的一个语句，现在只需要知道它的功能之一是可以改变元素的布局方式。比如一个div加了display：inline；就可以使它变成行内元素布局，水平排列，但不能设置宽高。还有一个display的属性是inline-block，今天我们就要用到它。

3.inlne-block可以使元素在拥有inline布局特性的同时，同时拥有block设置内外边距、设置高度的特点。这也是为什么不用inline的原因，inline不能设置宽高，导致盒子塌陷。

进入步骤：

1.什么都不加的时候是这样的 2.对蓝盒和绿盒加inline-block属性

3.加入p标签以后 好像不是那么回事，布局变乱了。可以清楚看到p标签的下边界与蓝盒下边距对齐，这不是巧合，是css 属性 vertical-align造成的，它只在 display为 inline 或者 inline-block 的情况下起作用，默认值是 baseline。这意味着把元素设置成 inline(-block) 的时候，内部的文字会按照基线对齐。

4.对绿盒使用vertical-align：top

垂直对齐顶部。

这样布局就完成了。但蓝绿盒中还有间隙，那是文档流回车被解释为空文本。可以把div写一行，还可以设置字体大小为0。