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  阅读(32419)  评论(0)  编辑  收藏  举报