[其它]vertical-align 属性，你了解嘛？？

问题说明 最近遇到了奇怪问题，让我仔细的去了解了vertical-align的基线baseline对齐
代码如下:
css

div{
   display: inline-block;
   border: 1px solid red;
   width: 100px;
   height: 100px;
 }

html

<div></div>
<div></div>
<div></div>

代码非常简单，给div设置为inline-block,设置了宽高。让其显示在一行，效果正常
运行结果如下：

图片：err.jpg

下面问题来了，给第一个div添加内容：“哈哈哈”
运行结果如下：

图片：error.jpg

再给第二个div添加内容:"哈哈哈"
运行结果如下：

图片：error2.jpg

再给第三个div添加内容:"哈哈哈"
运行结果如下：

图片：error3.jpg

根据以上的内容，我们发现，三个DIV全无内容，与三个DIV都有内容，显示都是正常的，为什么这个，原因，就是vertical-align的值baseline


解决方案

div{
   display: inline-block;
   border: 1px solid red;
   width: 100px;
   height: 100px;
   vertical-align:bottom;
}

默认vertical-align的值为baseline,给它改为bottom对齐即可[/p]

vertical-align属性
vertical-align是用来设置行内元素对齐方式的。说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素


基线相关
基线的位置并不是固定的：

在文本之类内联元素中，基线是字符x的下边缘位置
在像img元素中基线就是下边缘。
在inline-block元素中，也分两种情况

如果该元素中有内联元素，基线就是最后一行内联元素的基线。

如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的底边缘

总结
上面的三个Div,当第一个DIV里添加文件后，第一个DIV的基线就变成了"哈哈哈"文字的下边缘，第二个DIV没有文字，他的下边缘就是margin的底边缘，因没有margin,那就相当于底部边框。下面做个测试给div添加一个margin-bottom:50px，运行结果如下：

图片：margin.jpg

即下边缘就是margin的底边缘。终于，弄清楚了，不知道大家懂了没，如果喜欢请大家关注一个【bug收集】公众号。