我对CSS vertical-align的一些理解与认识(二)
1. 我对不同浏览器解析vertical-align属性的理解
在上集中,在最后提供的实例中,vertical-align:middle实际上应该是与后面的文字是独立的,毫无关联,就是说vertical-align无论是什么,都不影响文字在box中的位置(IE6/7对vertical-align理解与现代浏览器有差异)。但是在实际情况下,行高可能会小于inline-block或是类似于inline-block属性的元素的content area的高度,此时vertical-align对文字的影响似乎是显而易见的,那么这种影响是如果实现的呢?这就是本段的重点
1.1 我对vertical-align文字对齐相关属性的理解
vertical-align属性可以说是CSS中兼容性最糟糕的属性之一了。比如说与文字相关的vertical-align属性,vertical-align:text-top;和vertical-align:text-bottom属性,这两个属性的解释IE浏览器(IE6-8)和现代浏览器是不一样的两个派别。到底哪种表现是正确的,这是不能随便做定论的。无论实现的机制如何,若能实现类似的效果表现,其实都可以说是正确的。在一般的使用条件下,例如小图标+文字,vertical-align:text-top这类文字对齐类属性在不同浏览器下的差异是较小的,这很难让我们去思考与理解这些差异在什么地方。但是,如果我们将测试的元素进行简化与放大,那么差异显而易见,也更利于我们思考其中的原因所在
我们可以参见下面的测试代码,一窥IE家族和现代浏览器下text相关vertical-align的差异表现
当line-height作为唯一的高度来源,且远远大于content area高度的时候(只与字体大小相关),此时我们可以喝直观的看到不同浏览器下的表现。上面代码很简单,一个行高200像素的div,里面有一个带有vertical-align:top属性的字体大60像素的inline水平的行内元素,边框只是便于观看识别留下的
对比IE7浏览器和IE8浏览器下的表现我们可以看到,就文字的垂直对齐方面,两者是一样的,这也很符合自己以往对vertical-align:text-top的形象化的了解,也就是文字顶部对齐,看IE浏览器下就是文字顶部对齐的,后面的文字的顶部就与前面大号文字的顶部的文字对齐。所不同的就是IE8浏览器的外部div的高度被撑开了27像素,差不多是1/2个文字大小的高度。下面看看两个代表性的现代浏览器下的样式表现(Firefox3.6&Chrome5)
经过我的仔细对比,Firefox3.6下的页面表现欲Chrome5浏览器下的是一模一样的,不仅如此,还与Opera浏览器也是表现一致。于是,就单纯从页面表现上来看,出现了两个阵营,不太和谐的IE阵营以及高度一致的现代浏览器阵营。但是究竟孰是孰非呢?这需要慢慢说来!
1.2 就表象而言
似乎可能好像IE浏览器下的表现符合我之前对vertical-align:text-top似是而非的理解,文字顶部对齐。看那,IE浏览器下,无论是IE6还是IE7或是IE8都是这样子的。相比之下,现代浏览器下的样式表现有些令人费解。OK,要追寻问题的解决最好的方法就是寻找他的根源,去需找它的定义,而不要根据一些表象而去臆测
翻译过来就是:让当前box的顶部与父元素的文字的顶部对齐
所以我们只要恰准了box的顶部以及父元素文字的顶部,就可以知道这类表现是怎么回事,哪种表现更加符合其本身的定义
1.2.1 当前box的顶部
在本实例中,当前box是包裹着“大大的文字”的这5个文字的span标签,那么这个标签的顶部在哪里呢?按照我对inline box模型的理解,这个标签的顶部应该是在——见下图标注:
上图中蓝色的参考线就是这个span box的顶部。如果您了解line box模型,这个不难理解。line box中重要的几个概念是:content area,inline box(以及匿名inline box),以及由inline boxes组成的line box
(1). 其中content area可以理解为内容实体,也就是图片中的文字,我们设置span标签的border属性或是background属性,所看到的围绕文字的边框以及背景色的区域就是指的content area,这个东西仅仅与文字的大小相关,其作用仅仅是显示内容而已,很多重要的工作都不是content area来执行的
(2). 每个inline属性的标签外部都有一个inline box,这个inline box是看不见的,这个看不见的inline box扮演着重要的角色,此box与CSS中的line-height属性相互配合构成了元素高度堆叠的基础。以我的理解,inline box的高度纯粹就是元素的line-height或是继承的line-height值决定的。例如本实例中,父div的line-height为200像素,自然,含“大大的文字”的span标签所在的inline box的高度就是200像素,换句话说,这个含有vertical-align:text-top属性的span标签的实际高度是200像素
(3). 本实例中有一段文字“后面是静止的文字”外部并未直接包裹任何标签,但是这段连续的文字外部也包裹了一个看不见的inline box(称之为匿名inline box),其本质以及一些表现与inline box几乎无异。也能占据200像素的高度
(4). span标签外部不可见的inline box以及文字所在的匿名inline box共同组成了line box,line box也是不可见的,每行文字有且仅一个line box,line box的高度由其内部的一系列的inline boxes高度共同决定,由内部的inline boxes的上下最大绝对差值决定的。例如本实例中,在现代浏览器下,外部div的高度之所以会被撑开,是内部两个inline boxes共同作用的结果
所以结合上面的简单分析,本实例中含有vertical-align:tetx-top属性的span标签实际的box区域应该如下图半透明绿色区域
1.2.2 父标签的文字顶部
具体什么是“父元素的字体”我也不是很清楚,这是个很虚的概念,我甚至怀疑这本身就是个抽象出来的概念,例如一个div中两个inline水平的标签,一个vertical-align:text-top另外一个vertical-align”text-bottom,那么哪个才是这里的“父元素的字体”呢?我更加倾向于将这个“父元素的字体”解释为,假设父标签中有个很单纯的文字,指无标签,无嵌套的文字,所有属性纯粹继承的文字(即使这个文字根本不存在),那么这个文字就是这里所指的“父元素的字体”
在本实例中,正好“后面是静止的文字。”这段文字字符是纯粹的文字,属性完全继承的文字,则“父元素字体的顶部”就可以认为是这段文字的顶部了
所以,综上所述,实际占据200像素的span标签要与后面的“纯粹文字”顶部对齐,没有办法,这个span标签只好下移,下移的距离为92像素,这个92像素时如何来的呢?很简单:后面的文字实际也占据200像素的高度,其中本身文字大小16像素,也就是文字的content area占据16像素的高度,如果span标签与文字垂直中线对齐,则下移为100像素,但是由于是顶线对齐,于是要少掉1/2个文字高度,也就是8像素,于是span标签下移了92像素
我们会发现文字都是被200px的行高设置了高度
我们会发现因为设置和父元素内无修饰的文字的顶部对齐(仅仅是和文字顶部对齐,而不是和文字的所在的匿名inline box的顶部对齐),所以这里将’大大的文字’下移来对齐
1.2.3 IE浏览器的解释
像Firefox,Chrome,Opera浏览器被称为modern browser(现代浏览器),也被称为标准浏览器。这类浏览器对于CSS的渲染都是比较符合W3C标准的,但是IE浏览器,有点孤芳自赏之感,走了很多自己的路,于是在CSS的解释与渲染上,很多与标准浏览器之间是有差异的。其中对vertical-align的解释就是其中之一。本文之前所有的讲解都是针对的现代浏览器
虽然IE8对不少vertical-align属性的解释与现代浏览器一致,但是有些还是走的其老套路。例如这里的vertical-align:text-top属性。由于IE浏览器对vertical-align:text-top的解释与标准有差异,所以我也无法准确说出其样式表现的机制是什么。按照我自己未经证实的一些推测,IE浏览器(IE6-IE8)似乎将当前元素的顶部理解为了当前元素文字的顶部(也就是inline box模型中的content area的顶部,而不是inline box的顶部),于是vertical-align:text-top就是两段文字之间的对齐,span文字的顶部与后面裸文字的顶部对齐。如果我们不仔细思考vertical-align的定义,可能就会觉得IE浏览器的实现似乎更合理,更容易理解
总结:
1. content area指的是内容实体,所看到的围绕文字的边框以及背景色的区域就是指的content area
我对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属性的理解,它有什么作用呢? 告诉浏览器,这个元素的某些属性可能会频繁变动触发回流,要求浏览器给予资源进行优化,一般浏览器会给这个元素单独生成一个图层 ...
- 深入理解C/C++二维数组
深入理解C/C++二维数组 前言 本来以为自己对二维数组的理解还可以,没感觉有什么,但是今天小伙伴问了一个问题感觉迷惑了好久,于是决定细致的记录一下,一步一步的探究各种关于二维数组的问题,巩固基础. ...
- TLD(Tracking-Learning-Detection)学习与源码理解之(二)
TLD(Tracking-Learning-Detection)学习与源码理解之(二) zouxy09@qq.com http://blog.csdn.net/zouxy09 OpenTLD下载与编译 ...
- 深入理解常见的二十三种设计模式
深入理解常见的二十三种设计模式 文章目录 深入理解常见的二十三种设计模式 一.设计模式的分类 1.1 创建型(五种) 1.2 结构型(七种) 1.3 行为型(十一种) 二.创建型 2.1 单例模式 2 ...
- 深入理解Plasma(二)Plasma 细节
最新内容会更新在主站深入浅出区块链社区 原文链接:深入理解Plasma(二)Plasma 细节 这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等. ...
- Scratch3.0——助力新进程序员理解程序(十二、画笔)
Scratch3.0--助力新进程序员理解程序(十二.画笔) 目录 Scratch3.0--助力新进程序员理解程序(十二.画笔) 前言 环境 下载地址 安装说明 1.菜单栏 2.功能栏 3.代码区 4 ...
- 看《墨攻》理解IoC概念(二 )http://www.qqread.com/erp/3/j380307_3.html
看<墨攻>理解IoC概念(二) 巧巧电脑网络 2007-11-07 IT168 陈雄华 收藏此文 大 中 小 分享到QQ空间人人网开心网豆瓣新浪微博腾讯微博更多0 上一页123下一 ...
- CSS中关于margin的理解误区
思考一 在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离. 但是实际是:相对于自身原来的位置偏移. 举个例子: <!DOCTYPE HTML ...
最新文章
- 项目经理都在用什么项目管理工具?
- 取消管理员取得所有权_企业取得违约补偿款是否一律应缴增值税呢?
- 组件,控件,插件,库都是什么鬼啊
- [uoj24]缩紧优化
- C语言实用算法系列之冒泡排序、sizeof与strlen的区别
- ffmpeg 缩放算法_图像尺寸调整算法介绍并手动实现近邻算法
- “零代码”时代已来!程序员真的要去送外卖了?
- gridview 默认编辑按钮改成图片
- php 使用json 教程,PHP使用JSON 教程
- 中国内置扬声器市场趋势报告、技术动态创新及市场预测
- linux下samba环境搭建
- 学习LoadRunner之C语言函数
- jq为a标签绑定的onclick事件在移动端不响应
- Luogu1638 逛画展
- 我是如何从大三开始实现财务自由的
- 初识Exchange2010
- 邮件营销:邮件标题如何变得更有吸引力
- 系统架构师论文-论软件开发平台的选择和应用(MIS系统)
- Linux-下往移动硬盘中拷贝数据
- Jpeg-9e源码编译(Win10,VS2022)
热门文章
- 王道操作系统考研笔记——2.2.0 交互式系统调度算法
- 开源cms - 资料收集
- mac:在当前文件夹打开terminal终端
- 显示当前行号、文件名和函数名(二)
- JS prototype作用
- [react] react中遍历时为什么不用索引作为唯一的key值?
- 前端学习(3213):setstate的一个使用
- 前端学习(2916):事件绑定
- [html] html5中的meta标签robots有什么作用?
- [jQuery] jQuery的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?