写在前面的话

在学校业余学习了一个月的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. tomcat JNDI Resource 配置

    最近公司的项目慢慢开始向Maven项目迁移, 部分配置文件公共组也帮我们做了些改动,其中在spring的applicationContext.xml中看到了数据连接bean存在两个,一个是jndi 一 ...

  2. shell 多线程

    不熟悉 io 重定向的童鞋,先学习一下相关知识 http://www.linuxplus.org/kb/io-redirection.html 下面是简单代码 #!/bin/bash tmpfile= ...

  3. spring json的支持

    在spring中可以通过配置来实现对json的支持: 以下连接是看到的一篇对这方面内容讲解比较好的文章 http://www.cnblogs.com/fangjian0423/p/springMVC- ...

  4. jvm内存结构(一)(结构总览)

    jvm内存结构:<Java虚拟机原理图解>3.JVM运行时数据区 程序计数器: ,是执行的字节码的行号指示器,记录的是正在执行的虚拟机字节码指令的地址. ,每个线程都有独立计数器,互不干扰 ...

  5. Jmeter监控系统等资源，ServerAgent端口的本次启动端口修改

    默认情况下在下载的ServerAgent下,如果服务是windows系统,则直接启动"startAgent.bat"即可,如果是Linux系统,则直接启动"./start ...

  6. JDK源码学习之 集合实现类

    一.HashMap (1) 简介:java1.8版本之前HashMap的结构图如下: 数组的每个元素都是一个单链表的头节点,链表是用来解决冲突的,如果不同的key映射到了数组的同一位置处,就将其放入单 ...

  7. Python小白学习之路（十一）—【局部变量和全局变量】【关键字global】【关键字nonlocal】

    写在前面: 几乎有一周没有更新学习笔记了吧 上周一周身体都不怎么舒服 然后还得写开题报告 然后还得看文献 天天就是写写写写写写~~~~~~改改改改改改~~~~~~~~~ 今天又开始学习了 希望之前的没 ...

  8. iOS-WKWebview 带有进度条加载的ViewController【KVO监听Webview加载进度】

    前言 为什么要说 WKWebview,在之前做电子书笔记时已经提过 WKWebview 在iOS8之后已完全替代 Webview,原因就不多说了,主要还是内存过大: 封装 封装一个基于 UIViewC ...

  9. Java之IO(九)其它字节流

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7063161.html 1.前言 之前的章节已经介绍了java的io包中所有成对(输入.输出对应)的字节流,本章介 ...

  10. RabbitMQ初学之二:直接发送消息到队列

    一. 背景 总前提:队列无论是在生产者声明还是在消费者声明,只有声明了,才能在RabbitMQ的管理界面看到该队列 生产者直接发送消息到队列,消费者直接消费队列中的消息,而不用指定exchange并绑 ...