写在前面的话

在学校业余学习了一个月的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. 记录php漏洞--宇宙最强语言 PHP 爆出 DoS 漏洞,可以直接灌满 CPU

    站长之家(Chinaz.com)5月20日消息  近日,PHP被爆出存在远程DOS漏洞,若黑客利用该漏洞构造PoC发起连接,容易导致目标主机CPU被迅速消耗.此漏洞涉及众多PHP版本,因而影响范围极大 ...

  2. [JavaScript] 获取数组中相同元素的个数

    /** * 获取数组中相同元素的个数 * @param val 相同的元素 * @param arr 传入数组 */ function getSameNum(val,arr){ processArr ...

  3. ReentrantLock锁的释放

    一:代码 reentrantLock.unlock(); 虽然只有一句,但是源码却比较多: public final boolean release(int arg) { if (tryRelease ...

  4. How to manage IntelliJ IDEA projects under Version Control Systems

    如何在版本控制系统中管理 IntelliJ IDEA 项目文件 IntelliJ IDEA 设置详细,功能强大.在实际工作中,我们有时会遇到跟同事共享项目文件的情况. 那么,有哪些项目文件应该加入到版 ...

  5. java.lang.IllegalStateException: The content of the adapter has changed but ListView did not receive a notification

    ListView UI重绘时触发layoutChildren, 此时会校验listView的mItemCount与其Adapter.getCount是否相同,不同报错. ListView.layout ...

  6. spring boot和mybatis集成分页插件

    MyBatis提供了拦截器接口,我们可以实现自己的拦截器,将其作为一个plugin装入到SqlSessionFactory中. 首先要说的是,Spring在依赖注入bean的时候,会把所有实现MyBa ...

  7. UBUNTU 安装中文语言包命令

    本次在UBUNTU安装国外程序,需要中文包 才会是中文. apt-get install language-pack-zh-hans 解决.

  8. javac的泛型

    ?:在实例化对象的时候,不确定泛型参数的具体类型时,可以使用通配符进行对象定义. (1)?表示通配符,通配符 与 T 的区别 T:作用于模板上,用于将数据类型进行参数化,不能用于实例化对象. publ ...

  9. 在Struts2标签s:textfield中显示正确的日期

    Java代码   struts2中的日期期输入显示问题   struts2 中的默认的日期输出并不符合我们的中文日常习惯.以下是我知道的在struts2中进行日期格式化输出的几种方式. 1.利用 &l ...

  10. form表单select的选项值选择

    html: <form action=""> <p>选择城市</p> <p> <select name="" ...