我对CSS vertical-align的一些理解与认识（一）
2024-04-10 04:54:54
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属性的表现形式都只和其父元素有关系，而和其余元素是没有任何关系的，我们通常遇见的和垂直居中对齐都是假象
我对CSS vertical-align的一些理解与认识（一）相关推荐
- CSS魔法堂：深入理解line-height和vertical-align
前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...
- [css] 说说你对CSS样式覆盖规则的理解
[css] 说说你对CSS样式覆盖规则的理解 1.选择器的权重覆盖: 2.相同选择器的顺序覆盖: 3.行内样式>内联样式>外联样式 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很 ...
- [css] 说说你对css的will-change属性的理解，它有什么作用呢？
[css] 说说你对css的will-change属性的理解,它有什么作用呢? 告诉浏览器,这个元素的某些属性可能会频繁变动触发回流,要求浏览器给予资源进行优化,一般浏览器会给这个元素单独生成一个图层 ...
- CSS中关于margin的理解误区
思考一 在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离. 但是实际是:相对于自身原来的位置偏移. 举个例子: <!DOCTYPE HTML ...
- CSS中盒模型的理解
1.基本的盒模型知识 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如 ...
- css类选择器或逻辑,深入理解CSS中选择器的逻辑处理
在过去的很长一段时间中,我们都说 CSS 是不带有任何逻辑的,意思是在 CSS 中没有控制流,也没有某种类似于其他编程语言的方式来组织 CSS.CSS 天生缺乏逻辑性的问题导致了预处理器的出现.然而业 ...
- 关于CSS中定位的个人理解
以前看到过一句话,大意是CSS世界其实是"流"的世界.现在偶然想起,便觉得很有道理. 1.那么什么是"流"呢? 也许你见过大海或者大河,里面的水是流动的.或许, ...
- css的浮动与清除理解
1.浮动可以解决的问题: (1)文字包围图片的问题. (2)莫名其妙的间隔问题. (3)向左向右排版对齐. 1.1文字包围图片的问题. 首先看没有加浮动的效果, <!DOCTYPE html&g ...
- 「CSS 3D 专题」搞懂 CSS 3D，你必须理解 perspective（视域）这个属性
关注前端达人,与你共同进步 开篇 上一章节<学习前,你需要了解什么是CSS 3D?>里,我们一起了解什么是CSS 3D,本篇章节笔者将带着大家学习 perspective(视域)这个重要属 ...
- css布局margin介绍,深入理解css中的margin属性（推荐）
之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些" ...
最新文章
- com口驱动_手机都没耳机口了，平衡口现在才来是作死还是？
- debconf: DbDriver config: /var/cache/debconf/config.dat is locked by another process
- 2019字节跳动秋招笔试
- [ActionScript 3.0] AS3中的位图（BitmapData）应用
- python定义函数的组成部分有_Python学习笔记之函数的定义和作用域实例详解
- 技术晨读_20160217
- 【排列组合】只上代码不解释
- 传奇HERO引擎给装备加套装属性技巧
- 2021-06-18
- 母函数（指数型）（泰勒展开式）
- 百度快照劫持的解决方法
- JavaScript中的模块化开发
- HTTPS是如何保证安全的
- Mac 查看本地端口
- 复合函数的共轭函数例子
- 创品牌强农精品培育消费引领 国稻种芯百团计划行动发布
- Uva 10158 War
- 哈佛结构/冯诺依曼结构详细分析
- MATLAB超级实用的简单图像处理代码大全
- 黑群引导制作及系统安装（文后附软件包）