【深度探究css】--- vertical-align

提醒：内容与图片较多。。。。。。

前言：由于vertical-align这个属性w3c似乎也并没有给出比较完整的对齐规则，只是对各个值的解释（或者我的姿势不对？？？？？？？）。所以下面使用大量的测试去探究它的对齐规则。

如有不一样的见解，理解错误的地方，还望留下你的见解~感谢~

vertical-align，就跟它的名字一样，用来垂直对齐的，那么他到底是如何实现对齐的呢。在这之前，我们先来看看两张图。

首先是w3school上的一张关于vertical-align各个值的解释：

、

然后我们再来看一张用来理解这个属性的核心图：

注：红色代表文本的顶端与底端，绿色代表基线。

那么，开始吧：

首先，vertical-align我们知道在table下是让设置vertical-align是控制元素内的内容，而应用在非tab元素下的时候却是截然不同的效果，而这个非table元素只针对inline-block以及inline元素，当设置了这两个中的任意一个，其默认就会拥有vertical-align:baseline，而在block元素下是无效的，在同排没有其他元素（在文档流内元素）时也视为无效，当然我们使用display来修改让block元素支持vertical-align属性。

然后一步步往下走，为了方便，全部使用行内快来讲。。。

baseline：

把元素放置在父元素的基线上，vertical-align的默认值。实际上就是把元素的基线与其父元素的基线对齐。那么基线又是个什么东西呢？基线就是元素内文本的下沿线，这里的下沿线指的不是中文字的下沿线，而是英文X的下沿线。如果不是很理解具体的默认位置，那么想想当初写英语单词的那个本子和上面的第二张图，应该还是比较好理解的。。。

根据解释还是有些疑惑的地方，父元素的基线的位置是如何判定的呢？

一般来讲当父元素（这里使用的是行内块，是为了与后面的实现对接，如果此父元素独占一行，设置为块级元素也无妨）内有子元素被设置"vertical-aling:baseline"并且有内容存在时，父元素的基线的位置是在子元素的基线所在位置，看下面两张图（绿色线代表基线）：

我们可以看出第一张什么都没变化，而第二张发生了比较奇特的事，s2位置偏移了，他们的基线对齐了。那么“父元素的基线的位置是在子元素的基线所在位置”这句话就有点说不通了啊喂，别急我们现在把两个元素的字体大小调换下看看发生什么，看图：

到这里不难看出在有子元素并且有内容的情况下，父元素基线所在位置是取在子元素还在默认位置时他们的基线与父元素顶部距离最大的那个位置，其他同行元素相对于父元素的基线对齐。

那么继续走，来看看没有内容的情况下元素的基线是在哪：

这里发现基线位置发生了改变。而这时候的基线位置是如何判断的呢？事实上当元素内无内容时是没有基线的，并且会让其元素底端与元素父元素基线对齐，而这时父元素的基线取得是距离顶部最远的那条基线，显然一整排就一条基线，那么肯定就是取它了。但是如果只是单纯的从上图根本没办法很好的判断是否是这样设置的，那么我i们测试下，我们让父元素的基线发生一次改变看下结果会是什么样的：

答案已经浮出来了，这里就不多说了。

到这里为止似乎都没见到vertical-align这个属性的出现，在开头有说过，实际上当一个元素被设置为inline或者inline-block元素或者自身就是这两个元素之一的时候，就已经自动拥有了vertical-align:baseline这个属性。好吧。。这里我们继续放图来看看设置了vertical-align：baseline后是否会发生变化：

如图所示，并没有任何变化，

然后这里还有个疑问，这个属性是否只适用于兄弟元素呢？我们来做个实验：

从图中可以看出baseline这个值是会影响到同行的其他元素的。也就是说即使不是兄弟也能触发vertical-align导致整排发生垂直偏移。

到这里为止关于baseline这个东西以及基线都讲的差不多了。然后开始去其他值那溜达溜达。

super与sub：使元素的基线与父元素的首选上下标对齐。根据权威指南上的解释，使其基线位于父元素基线的上下一定像素的距离，各个浏览器之间存在几像素偏差。先来看张图：

从左至右分别是火狐丶谷歌丶IE8下可视区尽可能对齐的情况下的基线位置，似乎连基本的基线都有些差异，火狐和谷歌的基线差异较小，IE8较大，但是火狐与谷歌的sub位置却差异略大。不排除可视区没对齐的几像素偏差。其他属性是否同样存在不同浏览器之间的差异，还需要进一步的去验证。这里就不再继续深究。

top：使元素的顶端与其父元素内的所有子元素中最顶端的元素对齐。还是一样来看张简单明了的几张图：

三张图，给了不少信息，首先top这个属性并不会影响其他元素，只影响元素本身。其次，与内容区毫无关系。只与元素的顶端。并且我们从第三张可以看到为d2加了个子元素后基线发生了变化，具体原因前面已经讲过，父元素基线位置问题。

bottom：与top同理，只是对应的位置从元素顶端变为元素底端，其他都是一致的，不放图了；

text-top与text-bottom：使元素的文本顶端丶底端与父元素的基线对齐。这个也不难理解，回头看下最前面的那张核心图。红色线就是文本的顶端以及底端。那么我们继续看图：

可以看出text-top以及text-bottom对其他元素的影响情况与top丶bottom是一致的，只影响元素本身。

middle:元素的中垂线与父元素的基线上方的某一个点对齐。一开始我以为这东西是与基线对齐的，直到查看了权威指南上的解释，父元素基线上方的某一个点，一般情况下是0.5ex,而浏览器往往把1ex处理为0.5en，。。，某一个点。。。。。？？？？？？？？？？？这个点在某些浏览器下还存在着一定差异性。。。。我们暂且不论浏览器之间的差异，来看看是否真的是基线上方的某一点吧。老样子，看图：

这里稍微解释下，我在s1内部追加了一个元素，其高度占50%，利用box-sizing修改了其计算方式，保证边框大小不影响实际的50%高度。结果显而易见,middle对齐方式是元素的中垂线与基线上方某一个点的位置对齐，而这个距离是多少呢？从结果来看，middle确实并非使元素的中垂线与父元素的基线对齐，而是与父元素基线上方0.5ex(0.25em)处的那个点对齐（见第二张图）。而关于浏览器差异性，在IE8以及谷歌下测试完发现并没什么差别。。。还是说我测试的姿势不对？？？？？放张谷歌浏览器上的测试结果图：

好的。那么就这样结束了吗？别急，还没呢。。。既然之前有一点理解错误的地方，那么之前采用的子元素想互相剧中对齐，全部设置为middle是否真的居中了呢？我们来看看吧：

我们先看第一张图，可以看到middle的效果是正常的，这里可能会有这样一个疑惑，父元素基线位置为什么会在这个位置？这时候我们看看第二张图，似乎，d1里面的子元素基线蜜汁消失了？经过多番测试的结果猜测当子元素全部设置了middle以后父元素的基线将与在所有子元素中垂线对齐之后的下方某一个点对齐。然后再根据baseline的对齐规则进行对齐，最后呈现在客户端上。

length:顾名思义，使用数值来设置齐对齐方式，对齐规则为元素相对于原本所在位置向上下方向偏移指定量。也可以理解为元素在发生baseline对齐之后再进行上下偏移。正数向上偏移，负数向下偏移。

%:使用百分比来进行对齐。对齐规则同数值方式。但是有一点不同，这个百分比的对象是line-height。。。也就是说这个百分比是根据line-height来进行计算的。。。。关于line-height与vertical-align的基情关系以及line-height这个属性的深度探究将另开篇章来诉说。

关于vertical-align的探究到此就暂时告一段落了~~~~ 如有任何不一样的见解，额外的补充以及文中出现的错误点，还望留下你的见解。以上，感谢~~~~~~~~

【深度探究css】--- vertical-align相关推荐

CVPR2018 | R(2+1)D结构：视频动作识别中的时空卷积深度探究
本文是C3D作者Du Tran+IDT作者Heng Wang发表在CVPR2018的新作.来自Facebook Resaerch &Dartmouth Colledge.文章主要对是动作识别 ...
心智模型学习：深度探究用户需求的why
心智模型学习:深度探究用户需求的why 最近看到一种用户研究的方法叫"攀梯术",很有启发,原文比较理论,我试着翻译一下.它主要用在一对一深访的场景下,可以探究用户对产品功能/特性的 ...
css 深度选择器 ,CSS的coped私有作用域和深度选择器
大家都知道当编译前: .example { color: red; } 编译后: .example[data-v-f3f3eg9] { color: red; } 看完你肯定就会明白了,其实是在你写 ...
css之align 与 valign 的用法比较
align是横向 center是从左到右的剧中 align:的参数值有哪些:left,center,right valign是纵向 middle是从上到下的居中 valign的参数值有哪些:top ...
html中repeat的作用,深入探究CSS repeat()函数知识及用法
今天为大家讲解一下我最近学的一个CSS中repeat()函数的知识,repeat()函数要想理解透彻它,熟练掌握,需要大家花点时间去学习,因为我也查了很多资料,那么,该如何讲才能让大家更容易理解呢?想 ...
景联文科技：深度探究自动驾驶重要方向——车路协同
不久前,国内首部关于智能网联汽车管理的法规--<深圳经济特区智能网联汽车管理条例>获得深圳市人大常委会会议表决通过,并于8月1日起开始施行.该条例对车路协同基础设施进行了明确规定.根据&l ...
【TensorFlow_Fold】深度探究 Blocks for Input
0x00 前言想写点东西试试,结果输入就死活搞不定,一万个TypeError: 决定学跑之前先学爬,老老实实啃一下源码和官方文档,虽然官方还在一点点更新,不少地方还是空白的,不过先动起来多敲点试试看 ...
html css text align,css – text-indent不起作用,而text-align：right
看起来保持对齐对于浏览器来说更重要,所以文本的正确边缘保持在右边,无论如何. 该文档设置为ltr方向,因此缩进应用于该行的左侧,但由于您已经表示要将其与右对齐,所以浏览器完全忽略该缩进.我没有解释为什 ...
物联网经济价值的深度探究
https://www.toutiao.com/a6687379074618229255/ 物联网将继续为未来十年的数字业务创新提供新机遇,其中许多将通过新技术或改进技术实现,掌握创新物联网趋势的首席 ...

【深度探究css】--- vertical-align

【深度探究css】--- vertical-align相关推荐

最新文章

热门文章