写在前面的话

在学校业余学习了一个月的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. python操作oracle数据库-查询

    python操作oracle数据库-查询 参照文档 http://www.oracle.com/technetwork/cn/articles/dsl/mastering-oracle-python- ...

  2. XorPay.com 支付平台介绍【免费申请个人微信支付接口】

    XorPay 支付平台介绍 XorPay 定位为个人 / 独立开发者 / 个体户 / 小微企业提供安全.简单.稳定.正规的收款服务.目前支持微信 NATIVE / JSAPI / 收银台 / 小程序 ...

  3. android开发 gradle 总结

    gradle结构: MyApp ├── build.gradle ├── settings.gradle └── app └── build.gradle 1. setting.gradle解析 当你 ...

  4. Java之集合(二十二)PriorityBlockingQueue

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7510799.html 1.前言 本章介绍阻塞队列PriorityBlockingQueue.这是一个无界有序的阻 ...

  5. LR、HMM、CRF和MaxEnt区别

    LR:Logistic 是 Softmax 的特殊形式,多以如果 Softmax 与 MaxEnt 是等价的,则 Logistic 与 MaxEnt 是等价的. HMM模型: 将标注看作马尔可夫链,一 ...

  6. springboot-4-整合fastjson

    使用fastjson作为springboot的默认json解析, 原来使用的是jackson 1, 引入依赖 <dependencies> <dependency> <g ...

  7. C#中给滚动条增加鼠标滚动轮控制事件

    当滚动条的父控件获得焦点时,可以使用鼠标的滚动轮来控制滚动条 public partial class Form1 : Form { public Form1() { InitializeCompon ...

  8. C语言求数组的第二大数

    nt second(int value[],int n) { ]; ]; ; ;i < n;i++) { if(value[i] > first) { second = first; fi ...

  9. Linux时间命令

    Linux一般有系统时间和硬件时间之分,date命令是显示和操作系统时间:hwclock用来操作硬件时间(日期).日期和时间很重要,比如错误的日期和时间会导致你不能编译程序. 1 date 用法:   ...

  10. Node.js http服务器搭建和发送http的get、post请求

    1.Node.js 搭建http服务器 1.1创建server.js var http = require('http'); var querystring = require('querystrin ...