字母’x’在CSS世界中的角色和故事
一、不起眼的字母’x’
首先,我们这里的字母'x'
就是26个英文字母a
,b
,c
,...
中的x
.
由于自身形态的一些特殊性,因此,这个小小的不起眼的字母担当大任,在CSS世界中扮演了一个重要的角色。
有人可能的第一反应是:“我知道,可以模拟关闭按钮的那个叉叉效果!”
这位同学思维很活跃,但是呢,本文所要介绍的字母'x'
和CSS的关系不是奇巧淫技,而是正统的术语上的紧密联系。
二、字母’x’与CSS中的基线
在各种内联相关模型中,凡是涉及到垂直方向的排版或者对齐的,都离不开最最基本的基线(baseline
)。例如,line-height
行高的定义就是两基线的间距;vertical-align
的默认值就是基线;其他中线顶线一类的定义也离不开基线;基线甚至衍生出了:
- “alphabetic” baseline: “字母”基线 – 英文
- “hanging” baseline: “悬挂”基线 – 印度文
- “ideographic” baseline: “表意”基线 – 中文
那大家知道基线又是如何定义的吗?
哈,基线的定义就离不开本文的男主角'x'
.
字母x的下边缘(线)就是我们的基线。
对,是字母x
, 不是字母s
之类下面有尾巴的字母。
三、字母’x’与CSS中的x-height
字母'x'
与CSS的故事远不止基线这么简单。CSS中有一个概念叫做"x-height"
, 指的是字母'x'
的高度。
有人可能会疑问了,“一个字母的高度跟我CSS布局排版有半毛钱关系啊?”
实际上关系可大了。
首先,需要了解下"x-height"
的含义,通俗讲,"x-height"
就是指的小写字母'x'
的高度;术语描述就是基线和等分线[mean line](也称作中线[midline])之间的距离。
维基上有这么个示意图:
"x-height"
的示意范围一目了然,了然于心,于心不忍,不忍直视。
上面图中还出现了其他的名词,这里简单说下我的理解:
- ascender height: 上下线高度
- cap height: 大写字母高度
- median: 中线
- descender height: 下行线高度
然后,CSS中有些属性值的定义就和这个"x-height"
的有关,最典型的代表就是:vertical-align: middle
.
这里的middle
是中间的意思,注意,跟上面的median
中线不是一个意思。规范中对垂直对齐的middle
这么解释的:
middle: This identifies a baseline that is offset from the alphabetic baseline in the shift-direction by 1/2 the value of the x-height font characteristic. The position of this baseline may be obtained from the font data or, for fonts that have a font characteristic for “x-height”, it may be computed using 1/2 the “x-height”. Lacking either of these pieces of information, the position of this baseline may be approximated by the “central” baseline.
大意就是:middle
指的是基线往上1/2 "x-height"
高度。我们可以近似脑补成字母x
交叉点那个位置。
有此可见,vertical-align: middle
并不是绝对的垂直居中对齐,我们平常看到的middle
效果只是一种近似的效果。原因很简单,因为不同的字体,其在行内盒子中的位置是不一样的,比方说’微软雅黑’就是一个字符下沉比较明显的字体,所有字符的位置相比其他字体要偏下一点。要是vertical-align: middle
是相对容器中分线对齐,呵呵,你会发现图标和文字不在一条线上,而相对于字符x
的中心位置对齐,我们肉眼看上去就好像和文字居中对齐了。
四、字母’x’与CSS中ex
字母'x'
衍生出了"x-height"
概念,并在这个基础上深耕细作,进一步衍生出了ex
, 注意,这里的ex
不是前任的意思,而是地地道道CSS中的一个尺寸单位。
大家可能都听过用过em
, px
甚至用过rem
, 说不定对连IE6都老早支持的ex
单位却很陌生。
ex
是CSS中的一个相对单位,指的的是小写字母x
的高度,没错,就是指"x-height"
.
那这个单位有什么实际用途呢?我只能呵呵,貌似没啥实际用途,否则也不会这么不为人所知。
是这样吗?
五、单位ex的价值与实用性
存在必有价值。我们细细思考字母"x"
在CSS世界中扮演的角色,就会发现ex
的价值所在。
首先,需要明确一点,虽然说尺寸单位的作用是限定元素的尺寸,但是,由于字母"x"
受字体和环境影响大,参考性太低,因此ex
显然不太适合做这个。那问题来了,ex
连自己的本职工作都做不好,难道还指望其副业开挂?
没错,ex
的价值就在其副业上——不受字体字号影响的内联元素的垂直居中对齐效果。
我们都知道,内联元素默认是基线对齐的,而基线就是x
的底部,而1ex
就是一个x
的高度。设想下,假如我们图标高度就是1ex
, 同时背景图片居中,岂不是图标和文字天然垂直居中,而且,完全不受字体和字号的影响。因为ex
就是一个相对于字体字号的单位。
文字表述苍白,我们看个例子,下图所示的文字后面跟个小三角图标的效果是非常常见的:
现在,要让该图标和文字中间位置排整齐,你是如何实现?
尺寸啪啪,然后vertical-align: middle
?
这样虽然也有效果,但是,实际上啰嗦了,借助ex
单位,我们直接借助默认的baseline
对齐就可以实现我们的效果!
如下CSS代码:
.icon-arrow {display: inline-block;width: 20px;height: 1ex;background: url(arrow.png) no-repeat center; }
然后就华丽丽地对齐了,完全没有vertical-align
出场的机会。
您可以狠狠地点击这里:ex高度图标和字符天然对齐Demo
会发现,字体,文字大小全变化,对齐依旧良好:
虽然使用ex
做高度实现天然垂直对齐看上去很巧妙,但是,也是有局限的,就是如果图标背景的高度超过1ex
,我们就只能再请vertical-align
出马了……
对了,还有一点。由于IE6-IE7对内联模型的解释有问题,因此,各类vertical-align
在这些浏览器下都是有问题,包括这里的ex
天然基线对齐,需要特别处理下。
六、结束语
外面的雨哗啦啦的下了一整天,我的钓鱼大计啊,就此泡汤。
要是现在在老家就好了,沟沟渠渠里一定都是从鱼塘跑出来的鱼,下水摸鱼捕鱼不知有多快活。
不过话说,这阴雨天适合钓鲶鱼,要不待会儿冒雨出去碰碰运气?
话说本文的id
是4848, 有些不吉利啊。不过反而来讲,可能是对鱼儿说的!
有道理,写完就去钓会儿鱼,我有大头,下雨不愁!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:http://www.zhangxinxu.com/wordpress/?p=4848
字母’x’在CSS世界中的角色和故事相关推荐
- 字母‘x‘在CSS世界中的角色和故事
字母'x'在CSS世界中的角色和故事 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordp ...
- 《游戏设计艺术(第2版)》——学习笔记(20)第20章 世界中的角色
<游戏设计艺术(第2版)>学习笔记(20) 第20章 世界中的角色 游戏角色的本质 小说角色 电影角色 游戏角色 化身 理想型 白板 创造令人信服的游戏角色 角色窍门1:列出角色的功能 角 ...
- 字母x在css中的角色
► if (window.localStorage && window.isSlideHide) { (function() { var eleShink = document.get ...
- CSS世界-第四章 盒尺寸四大家族
盒尺寸的4个盒子:content box,padding box,border box,margin box 一 深入理解 content 1.根据可替换性把元素分为替换元素和非替换元素 <im ...
- 《CSS 世界》读书笔记-流与宽高
大厂技术 坚持周更 精选好文 1. 前言 在学习 CSS 的过程中,我经常会被数不清的属性和特性弄得晕头转向.作为前端新手,经常会坐在显示器前花很多很多时间去 "追" 视觉稿, ...
- 层叠上下文-《CSS 世界》阅读笔记
层叠规则 目录 层叠规则 目录 z-index 什么是层叠上下文 什么是层叠水平 层叠顺序 层叠准则 层叠上下文的特性 笔者个人理解 层叠上下文的创建 定位元素与传统层叠上下文 层叠上下文与层叠顺序 ...
- oracle dba角色_DBA在“即服务”世界中角色的不断变化
oracle dba角色 在过去的十年中,现代企业中管理和运行数据库的需求和要求有了巨大的发展. 负责运行企业数据库的数据库管理员(DBA)的注意力正在发生普遍的转移:不是确保访问和可用性,而是要求他 ...
- MIT教授: 世界就是《黑客帝国》,人类在模拟游戏中扮演角色
转载于 新智元 编辑:元子 MIT教授认为我们目前有50%-100%的概率生活在<黑客帝国>那样的计算机模拟世界中,所谓现实可能不过是一种幻觉.而距离我们创建自己的模拟世界,最多需 ...
- 编写程序,测试字符串“你好,欢迎来到Java世界”的长度,将字符串的长度转换成字符串进行输出,并对其中的“Java”四个字母进行截取,输出截取字母以及它在字符串中的位置。
编写程序,测试字符串"你好,欢迎来到Java世界"的长度,将字符串的长度转换成字符串进行输出,并对其中的"Java"四个字母进行截取,输出截取字母以及它在字符串 ...
- 学习笔记——css世界
流 "流"又叫文档流,是css的一种基本定位和布局机制.流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动."流体布局"是html默认的布局机 ...
最新文章
- SSH异常“Failed to start OpenSSH Server daemon”问题排查
- Struts2中的struts.multipart.saveDir的配置
- 第一篇:Django基础
- RabbitMQ的Work能者多劳模式
- MyEclipse下Tomcat启动变慢的解决方法
- raid操作相关命令笔记
- ASP.NET MVC 环境配置,从1.0到2.0的转换和学习资源等
- 十年磨一剑,阿里云RDS MySQL和AWS RDS谁的性能更胜一筹?
- 高清电视开播:大多用户仍难跨入
- 利用React 和ant-design 搭建cnode项目的随笔
- java pppoe_ADSL(PPPOE)接入指南
- windows域用户切换本地用户
- 计算机二级关于ppt背景音乐,计算机二级考试真题-PPT-校摄影社团优秀作品展
- 【io】io等待为什么引发cpu过高?
- 计算机及格率用什么函数,excel计算及格率函数的使用教程
- 二叉树多种遍历的时间复杂度和空间复杂度
- 类和对象12:容器方法
- Tekla二次开发之切割部分的详解
- java第九课——继承
- 将ip电话注册到服务器上,ip电话怎么安装设置 ip电话安装设置方法文字详解【图文】...