写在前面的话

在学校业余学习了一个月的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位置改变的博文，谢谢阅读。

CSS中vertical-align的默认值baseline的理解的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. css中width和height默认值

    width和height默认都是auto自动伸缩的,但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%如果是table,如果div内的table没有设定100%,那就是最 ...

  3. 分别在javascript和JSP中动态设置下拉列表默认值

    一.JavaScript中动态设置select标签中<option>选项的默认值: 比如,要完成下边这个下拉列表的动态显示,并且当进行前后翻页时,下拉列表中的值自动更新为当前页码: 图1 ...

  4. css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  5. php与js中函数参数的默认值设置

    php函数参数默认值设置: <?phpfunction test($val=3){   echo $val."<br/>";}test(11);test();?& ...

  6. EF架构~在T4模版中为所有属性加默认值

    回到目录 在项目开发过程中,出现了一个问题,就是新添加一个非空字段后,原来的程序逻辑需要被重新修改,即将原来的字段添加到程序里,这种作法是非常不提倡的,所以,我通过T4模版将原来的实体类小作修改,解决 ...

  7. MVC4中给TextBoxFor设置默认值和属性

    例如:(特别注意在设置初始值的时候 Value 中的V要大写) @Html.TextBoxFor(model => model.CustomerCode, new { Value="  ...

  8. Django的model中日期字段设置默认值的问题

    之前写过这样一个model: class MonthlyFeeMember(models.Model): worker = models.ForeignKey(Student, verbose_nam ...

  9. 关于Java读取mysql中date类型字段默认值'0000-00-00'的问题

    今天在做项目过程中,查询一个表中数据时总碰到这个问题:      java.sql.SQLException:Value '0000-00-00' can not be represented as ...

随机推荐

  1. libevent源码剖析

    libevent是一个使用C语言编写的,轻量级的开源高性能网络库,使用者很多,研究者也很多.由于代码简洁,设计思想简明巧妙,因此很适合用来学习,提升自己C语言的能力. libevent有这样显著地几个 ...

  2. SecureCRT连接Ubuntu,centos失败解决

    SecureCRT连接Ubuntu,centos失败,长时间的重新连接,连接不了. Ubuntu,centos默认未安装ssh远程加密连接服务.使用命令,安装即可. 1.sudo apt-get in ...

  3. Servlet中相对路径与绝对路径

    相对路径与绝对路径: 相对路径:相对路径指的是相对于当前文件所在目录的路径! http://localhost:8080/servlet01/ http://localhost:8080/servle ...

  4. leetcode-165-比较版本号

    题目描述: 比较两个版本号 version1 和 version2.如果 version1 > version2 返回 1,如果 version1 < version2 返回 -1, 除此 ...

  5. NOIP2017滚粗记【下】

    (续上篇) Day1: 下午,全竞赛队的人都在竞赛室颓~,再次吐槽下我校网管科的,下午普及考试又把竞赛室的网络切掉了,还好我们机制地准别了一堆单机游戏.普及组考完后,网络又恢复正常了,但晚上9点左右又 ...

  6. WebAPI Post接收数据

    近日在写某开源商城的webapi接口,由于刚接触所以碰到某些问题,如post数据的接收啊等.在网上查询资料时给出了三种方式. 1.给多个数据对象封装成一个对象进行接收([frombody]标签只能用于 ...

  7. oauth三方登陆的原理

    一 说明 OAuth是由Blaine Cook.Chris Messina.Larry Halff 及David Recordon共同发起的,目的在于为API访问授权提供一个开放的标准(resful和 ...

  8. python中的sort方法

    Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不 ...

  9. Postman—做各种类型的http接口测试

    首先,做接口测试前要有明确的接口文档,假设已经在PC上安装好了Postman. 1. 普通的以key-value传参的get请求 e.g. 获取用户信息 Get请求,写入url拼好参数,发送请求,查看 ...

  10. 如何用 纯C++（ndk)开发安卓应用 ？

    视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 如何安装安卓的开发环境以及怎么设置ndk的环境变量等在前边的文 ...