inline-block元素vertical-align的问题分析

先来解释下这两个标签

inline-block:

字面意思：行内块元素，相当于强制转换，把一个标签设置为行内的块元素，既有块元素的部分特性（支持width\height\maigin-top\margin-bottom），又有行内元素的部分特性(不换行)。

vertical-align:

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

可能的值

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

深入理解vertical-align这些值的含义，可以参考这篇博客深入理解CSS中的行高与基线

现在的问题是使用inline-block时遇到关于vertical-align的问题：

HTML+CSS 代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动定义</title>
        <style type="text/css">
            div{
                border: 1px solid red;
            }
            .div1 , .div2{
                width: 100px;
                height: 100px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <div class="div2"></div>
            <div class="div1"></div>
        </div>
    </body>    
</html>

View Code