我对CSS vertical-align的一些理解与认识(一)

1. vertical-align一大堆乱七八糟的属性

有句俗语叫做“见多不怪”,我估摸着这些top,bottom属性大家都见过,没啥看头,没啥说头。老实讲,我看到这些养臭虫的属性也头疼,所以,忘了他们,我们说点有意思的。vertical-align属性与数值。见下面的表

这里写图片描述

这里写图片描述

1.1 首先关于数值

这里写图片描述

我的理解为,元素相对于基线向下偏移两像素,这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题。这个没有什么好说的

1.2 再者关于百分数值

百分值与数值,以我的眼光看去,代表了不同的思想,以及心态。前者代表着灵活,自由与开放,后者有严谨,精确,安稳之意。CSS中支持百分值的属性还不少,例如width/height,line-height,font-size,这里的vertical-align属性也是其一。提到百分值,必然牵扯到相对于那个属性(或值),例如宽度百分比都是相对于父块状元素的宽度值的,font-size的百分值是相对于向外的第一含有font-size属性的层的font-size大小而言的,而这里的vertical-align,是相对于此标签继承的line-height值决定的。例如,如下示例代码

这里写图片描述

假设这里的.test的标签继承的行高是20px,则这里的vertical-align:-10%所代表的实际值是:-10% * 20 = 2(像素)

1.3 最后关于其他属性,像是bottom,middle等

这里写图片描述

2. 为什么我的vertical-align属性不起作用?

知道了vertical-align是垂直对齐的意思,不少经验尚浅的同行会试着使用这个属性实现一些垂直方向上的对齐效果,会发现有时候可以,有时候又不起作用,不知道为什么?不急,慢慢来

我们知道display也有很多属性值,其中以inline/inline-block/block三个最常见,这代表了页面上三种不同水平的元素。我常常会以液态/固液混合态/固态加以形象化思考,对应于现实中的事物就是:牛奶/果冻/坚果

我们都知道,每个人都有不同的嗜好,有的人喜欢吃甜食,有的人喜欢吃辣的东西,有的人不喜欢吃芹菜,有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样,他们有的只对牛奶感兴趣,有的只喜欢吃坚果和果冻,而讨厌牛奶。而vertical-align呢,是个比较挑食的家伙,它只喜欢吃果冻,从小吃果冻长大,没有了果冻,它就会闹脾气,对你不理不睬。我称之为“果冻依赖型元素”,又称之为“inline-block依赖型元素”,也就是说,只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。所以,类似下面的代码就不会起作用

这里写图片描述

所谓inline-block水平的元素,就是既可以“吸”又可以“咬”的元素,既可以与inline水平元素混排,又能设置高宽属性的元素。哪些元素呢,例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用

虽然vertical-align属性只会在inline-block水平的元素上期作用,但是其影响到的元素涉及到inline属性的元素,这里千万记住,inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用,而是受制于整个line box的变化而不得不变化的,这个后面会较为深入的分析

3. vertical-align属性是如何起作用的?

这里,我使用vertical-align:middle属性作为例子,讲讲我对vertical-align是如何起作用的理解

★ 一些简单的例子

这里先列举几个简单的例子,方便对vertical-align:middle有了初步的直观的认识。例子内容如下,创建一个inline-block属性的元素,此元素的高度和宽度均为4像素,为了对比效果明显,我使用黑白二色,背景黑色,4像素*4像素的元素为白色,vertical-align属性依次为middle,bottom和text-bottom,当然,文字是必须的,否则何见对齐呢!整个实例的HTML代码都是一致的,唯一不同的就是一段vertical-align属性,测试环境均是Firefox3.6浏览器,HTML代码如下

这里写图片描述

3.1 默认属性(也就是baseline)

这里写图片描述

这里写图片描述

3.2 bottom

这里写图片描述

这里写图片描述

这里将要对齐的元素(小方块)的底端和line boxes(span元素的内容所组成的)的底端对齐

3.3 text-bottom

这里写图片描述

这里写图片描述

对比vertical-align:bottom和vertical-align:text-bottom,他们的表现似乎一样,实际上呢,这里的表现一致只是一个巧合而已,此话怎讲?要显示其差异很简单,添加一个line-height值,您就会看到不一样的地方了

3.4 line-height:10px + vertical-align:bottom

这里写图片描述

这里写图片描述

设置行高line-height后,小方块在具备行高的条件下也要保持和父容器的底部对齐,所以小方块被上移

3.5 line-height:10px + vertical-align:text-bottom

这里写图片描述

这里写图片描述

可以看到,vertical-align:text-bottom属性的那个小方点的位置没有随着line-height的改变而改变,还是与文字的底部对齐。如果您细看关于text-bottom以及bottom属性的定义,您可以找到其表现的原因:text-bottom是与父标签的文字底部对齐,在这里也就是后面的“我是一个卡哇伊的文字”这段文字对齐,而bottom是相对于父标签的底部对齐,而如果您熟悉line box模型且对高度的本质有所了解,那么您就会明白为什么line-height会改变标签的bottom的位置了。这点的了解有助于理解下面vertical-align:middle生效的过程及原理

3.6 middle

这里写图片描述

这里写图片描述

因为middle是所要对齐的小方块的中垂点和父元素的底部基线向上移动1/2个字母X的位置所对齐

★ 一些复杂的例子

如果说上面的例子只是热身的话,那么现在就要开始进入实战了。在这里的实例中,我们添加一个新的元素,就是图片,我们通过观察不同属性下图片的样式表现来理解vertical-align:middle等相关属性是怎么一回事,是怎样产生页面表现的

我们发现修改图片vertical-align:middle属性为其他的属性的时候,例如top,或是bottom的时候,您会发现,图片位置上移或是下移了,但是文字在那里却纹丝不动,显然,vertical-align的本质上是个独立的个体,与后面的line水平的元素是不存在直接的关系的。两者没有必然的联系,这是一个需要认识清楚的重要的东西,也就是其中一个元素的vertical-align属性的改变并不会影响另一个元素

这里写图片描述

总结:

1. vertical-align只对inline或者inline-block属性的元素起作用,对block属性的元素是不起作用的,这也是有时候为什么vertical-align会失效的原因

2. vertical-align:text-bottom是指将要对齐的元素和父元素的内容底部进行对齐

3. vertical-align:bottom是指将要对齐的元素和父元素的相对底部进行对齐,而不是相对父元素的内容底部进行对齐

4. 任何一个元素的vertical-align属性的表现形式都只和其父元素有关系,而和其余元素是没有任何关系的,我们通常遇见的和垂直居中对齐都是假象

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406908.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

@Repository , @Service , @Controller 和 @Component

用Spring MVC时Controller注解的类将变成一个Spring MVC的控制器. 不用Spring MVC的情况下, 这四个注解没有区别. 根据注解的语义, 注解在类上面可以提高代码的可读性.Repository代表仓库. 一般注解在DAO实现类上, 别人看代码时, 就知道这个类是一个跟数据存储有关的类. Servic…

vue的token刷新处理

前言 以token处理登录的web系统,一般会有两个token:access-token和refresh-token。 node.js中,一般用jsonwebtoken这个模块。 access-token,是用户输入登录的账号密码,后台去db验证然后颁发的,它一般记录…

我对CSS vertical-align的一些理解与认识(二)

1. 我对不同浏览器解析vertical-align属性的理解 在上集中,在最后提供的实例中,vertical-align:middle实际上应该是与后面的文字是独立的,毫无关联,就是说vertical-align无论是什么,都不影响文字在box中的位置&#x…

request_do?send方法

Ruby中 respond_to? 和 send 的用法php?nameRuby" class"t_tag">Ruby中 respond_to? 和 send 的用法[收藏] Ruby中的字符串与符号 如同其他的OO语言一样,在ruby中,通过给对象发送消息,来完成对象的功能,比如…

Vue中token刷新及token过期的实现

总:通过axios,vuex,及自定义的方法实现。 以下是思路: 1.做token刷新必不可少的是,token(请求时的token) / refresh_token(刷新token时用的refresh_token) / resetTime&a…

Source Code Library 源代码收集器

对于程序员来说,收集、整理一些常用的源代码是经常性的工作,但很多时候,随着收集的代码、文档、压缩包的增长,也会产生另一个问题:那就是如何快速找到所需要的内容。 这个问题曾经困扰着我,后来我开始使用&…

VC2010如何给ActiveX添加事件

利用VC开发ActiveX时,需要给控件添加标准事件或自定义事件,在VC6中有多种方法: 一、按Ctrl W 打开类向导->切换到“ActiveX Events"->Add Event...,如图: 二、右…

css动态设置宽高

css 中可以使用 calc() 来动态设置宽高,但是,在表达式中运算符的前后必须要有空格 height:calc(100vh - 80px);

Windows Runtime (RT)

学了sl for wp 开发了1年都没入门,只能说自己的学习欲望太低了。 今天偶然才发现wrt 跟 .net 是2个东西... orz。 得抛弃 sl ,wrt才是未来的主流吧... 这篇文章不错 http://www.dotblogs.com.tw/regionbbs/archive/2011/09/18/introducing.windows.runti…

产业链没有阴谋

IBM将PC甩给联想,是IBM的产业链阴谋吗?上个星期在客户的研讨会上有人这样问我。提问的这位朋友刚刚看过郎咸平的《产业链阴谋》,认为我们之所以处于“6 1”的低端,就是中了跨国公司的诡计,他们想进入高端,…

CSS中height:100%和height:inherit的异同

1. height:100%和height:inherit的异同 1.1 兼容性差异 height:100% IE6 √ height:inherit IE8 √ 1.2 大多数情况作用是一样的 除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由 父容器height: auto&#xff0c…

手机端双击页面放大的问题

制作手机端页面的时候我们都会加入一个meta标签, 该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。 其中 maximum-scale为允许用户的最大缩放值,user-scalable为是否允许用户进行缩放,yes(默认)…

cxxtest单元测试框架源码分析(二):所有对外功能实现分析

CxxTest的大部分诊断功能都是通过宏定义实现的,而且这部分的定义以及所有测试套的基类CxxTest:TestSuite定义和实现都在TestSuite.h和TestSuite.cpp里面。下面我们将通过分析这两个文件来分析CxxTest的对外功能体现。 1 //所有的类以及定义都是在CxxTest名称空间中2…

Interlocked.CompareExchange

class SourceManager { private SourceManager() { } private static SourceManager sourceManager; public static SourceManager Instance { get { if (sourceManager null) { /* lock 实现方式 功能与以下 Interlocked.CompareExchange 相同 lock (this) { if (sourceManag…

Dos下删除(非)空目录或文件

【删除非空文件夹】: 在xp中的虚拟dos也就是开始运行cmd啦,是可以输入中文的,要删除非空文件夹请用rmdir /s /q命令 删除非空目录:RMDIR [/S] [/Q] [drive:]path 删除空目录:RD [/S] [/Q] [drive:]path /S 除目录本…

absolute元素在text-align属性下的对齐显示

1. absolute元素是否可以响应text-align属性? 众所周知,text-align属性可以有效作用于inline/inline-block水平的元素,那么应用了position:absloute/fixed声明的元素呢? 上面效果中的图片就是应用了position: absolute声明&#…

vue-cli proxy中跨域中pathRewrite配置理解

1. vue本地项目调试线上接口出现跨域问题 2. 通过在 config/index.js 配置文件中找到proxyTable配置项 dev: {// PathsassetsSubDirectory: static,assetsPublicPath: /,proxyTable: {/api: {target: http://XX.XX.XX.XX:8083,changeOrigin: true,pathRewrite: {^/api: /api …