CSS中vertical-align的默认值baseline的理解

写在前面的话

在学校业余学习了一个月的CSS，人生中第一篇博客就献给CSS了，欢迎大家指正文章中不正确的地方，在此感谢。在尝试开始写博客的时候查了好多资料，原本以为写自己熟悉的知识的博客很容易，没想到中间还是遇到很多的不懂的地方，写博客真是个好习惯，可以帮自己总结知识，找出自己的知识盲区，只不过太花时间了。国庆都出去玩了，然而我宅了好多天。

veritical-align的作用，对象以及范围

作用
veritical是垂直的意思，而align是对齐的意思，两个合起来就是在垂直方向进行对齐。
对象
veritical-align的对象，就是谁要进行垂直方向上进行对齐，对象主要有inline元素、inline-block元素和普通文本框等。（table-cell元素本文不作考虑）
范围
veritical-align的范围，就是在哪里进行对齐呢，是在linebox里。

linebox是什么？

位置

linebox主要存在于block元素和inline-block元素中。linebox中可以含有普通文本框、inline-block元素、inline元素。

下面是自己画的图（画的丑别介意，哈哈），主要理解linebox的位置以及包含元素。

宽度和高度

linebox的宽度取决于内部元素的宽度，最大为父元素的宽度。
如果没有设置line-height，linebox的高度取决于linebox元素一起决定，一般由最高的元素决定linebox的高度。

vertical的默认属性baseline

baseline是什么？

这是维基百科上的一张图,简单地来说，baseline是小写字母x下面的一条线。
详细的资料可以查看张鑫旭的博客
linebox里面的元素的基线baseline

① 普通文本框的baseline

下面有代码可以自己运行试一下

<div style="background: #bbbbbb;font-size: 50px;line-height: 150px;">
    xxxxxhg<br/>
    xxxxxhg
</div>

查看代码

总结

普通文本框的baseline，为里面文本的基线，基线的位置取决font-size和line-height。
那如果里面没有x这样的英文字母，都是中文字母怎么确认基线的位置呢？
这么简单^_^....加一个字母x进入文本框不就省事了，哈哈。

② inline元素的baseline

<div style="width: 200px;height: 200px;margin: 50px auto;background: #bbbbbb;border: 10px solid yellow;">
<span style="display: inline;border: 10px solid bisque;font-size: 32px;background: aliceblue;padding: 20px;margin: 20px;">
    child
</span>
</div>

查看代码

总结

inline元素的baseline，为内容盒content-box里面文本框的基线。
那如果content-box里面有两行文本框呢？
哈哈，没有这样的情况啦，inline元素的文本框只有一行。

③ inline-block元素的baseline

从左到右的三幅图片都是inline-block元素，不同的是，左面包含着没有脱离正常流的内容c，中间的除了没有脱离正常流的内容以外还加了overflow:hidden,右面的没有内容但是内容区还有高度。红线代表了margin-box的边界。黄色代表的是border，绿色的是padding，蓝色的是content，蓝色的线代表的是baseline。

inline-block元素的外边缘就是margin-box的边缘。

inline-block元素的baseline的位置要看该元素有没有处于正常流之内的内容。

(1)在有处于正常流内容的情况下，inline-block元素的baseline就是最后一个作为内容存在的元素的baseline，这个元素的baseline的确定就要根据他自身来确定了。
(2)在overflow属性不为visible的情况下，baseline就是margin-box的下边界了。
(3)在没有内容但是内容区还有高度的情况下，baseline还是margin-box的下边界。

看得很乱对吧，刚开始我也是这么觉得，最后有代码练习

上面（1）（2）（3）种情况摘自弗里得木的翻译笔记

我自己再添加一种情况，其baseline也是margin-box，这种元素是内联替换元素，例如img标签，不管img标签的display设置为inline还是inline-block，其baseline都为margin-box，有兴趣的朋友可以去试一下。

总结

（1）有处于正常流的内容，baseline为最后一个linebox的baseline。(linebox的baseline后面有说到）
（2）overflow不为visible，baseline为margin-box的下边界
（3）没有内容，baseline为margin-box的下边界

超级大总结

到此，linebox里inline元素、inline-block元素以及普通文本框的baseline的位置我们大概了解了一下，看了这么多无聊的基线，接下来就是急冻人心的时刻了！！！我们要开始使用各元素的baseline进行垂直方向上的对齐。以下对齐实例的vertical-align值都是默认值baseline。

linebox的baseline

linebox里有怎么多baseline，那到底以谁的baseline为基准呢？

linebox的baseline以各个元素中最下面的baseline为基准，就是说谁的baseline在最下面，就以谁的baseline为基准进行对齐。

下面是实例①

普通文本框 VS inline元素 VS inline-block元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 500px;
            height: 500px;
            margin: 50px auto;
            background: #bbbbbb;
        }
        span.inline {
            background: #FF6600;
            display: inline;
            border:10px solid aqua;
            font-size: 30px;
            /*vertical-align默认值为baseline;*/
        }
        span.inline-block {
            background: yellowgreen;
            width: 100px;
            height: 300px;
            display: inline-block;
            /*vertical-align默认值为baseline;*/
        }
        /*
            大家可以先猜一下（inline、inline-block、text）谁的baseline在最下面，
            其中inline-block的baseline是第（3）情况---没有内容但有高度
        */
        
    </style>
</head>
<body>
<div>
    <span class="inline">inline</span>
    <span class="inline-block"></span>
    text
</div>
</body>
</html>

查看代码

大家可以先猜一下以谁的baseline为基准

下面是实例②

inline-block情况(1) （2）（3）PK

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 700px;
            height: 300px;
            background: #bbbbbb;
            margin: 50px auto;
        }
        span {
            width: 100px;
            display: inline-block;
            background: #f8b9b7;
            border: 10px solid #FF6600;
            margin: 30px;  /*这里很重要*/

        }
        /*
            inline-block元素的baseline三种情况
            （1）处于正常流，内容框中有内容
            （2）有内容且overflow设置为hidden或者auto，只要不是visible
            （3）无内容
        */
    </style>
</head>
<body>
<div>
    <span>我是inline-block情况（1）</span>
    <span style="overflow: hidden;">我是inline-block情况（2）</span>
    <span></span><!--这是情况（3）--没有内容 -->
</div>
</body>
</html>

查看代码

结尾

花了一天查资料，一天写博客，虽然有点累，不过过得很充实，在查找资料的时间得到许多朋友博客的帮助，在此感谢天镶和张鑫旭的博客。欢迎家指正文章中不正确的地方，在此感谢。

下次有时间就写vertical-align中linebox的baseline位置改变的博文，谢谢阅读。

posted @ 2016-10-06 18:42 FatDong 阅读(32523) 评论(0) 编辑收藏举报

刷新页面返回顶部

FatDong

CSS中vertical-align的默认值baseline的理解

公告