关于基线baseline及与inline-block、vertical-aline等属性的关系(完善中.......)
2024-10-18 21:24:25
1. 基本含义
基线(base line):而是英文字母x的下端沿,是a,c,z,x等字母的底边线,并不是汉字文字的下端沿,。下图的红色线即为基线。凡是涉及到垂直方向的排版或者对齐的,都离不开最最基本的基线
mean line:等分线,也叫中线
- ascender height: 上下线高度
- cap height: 大写字母高度
- median: 中线
- descender height: 下行线高度
基线作用很重要,是竖直方向对齐的关键,vertical-aline,inline-block这些都是根据他来排版定位的
2.一些小技巧
x-height:也就是 ex ,他是一个字母 x 的高度,她也是基本的度量单位,3ex 就是3倍x的高度,.ex是CSS中的一个相对单位。
(1)对于高度小于1ex的图片,如果想让他相对于一行文字居中时。因为图片也是行内元素,所以可以不换行和文字一起显示。内联元素默认是基线对齐的,图标高度就是1ex背景图片居中,图片和文字天然垂直居中,完全不受字体和字号的影响。
这个,如果是一段字,跟着一张img,img 高度定为1ex。那当字体变化时,图片大小不变,但是字体大小变化,所以16号字体会居中,如果25号字体图片就不会居中,图片的大小不变的。
如果是用背景图,下述代码即可
.icon-arrow { display: inline-block; width: 20px; height: 1ex; background: url(arrow.png) no-repeat center; }
最新文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--系统权限全套完整图
- 如何用Python实现目录遍历
- C#中常用的字符串加密,解密方法封装,包含只加密,不解密的方法
- Oracle Goldengate工作原理
- QT_校园导航(绘制路线已实现)_Updata_详细注释
- 详解android:scaleType属性
- HDU 5033 Building(单调栈)
- centos 6 安装docker
- 关于在官网上下载Eclipse遇到的问题!!
- node-webkit制作桌面应用
- Python开发简单爬虫(二)---爬取百度百科页面数据
- 【Spring Cloud笔记】Eureka注册中心增加权限认证
- Attention Model
- React createRef:引用
- 【BZOJ2227】[ZJOI2011]看电影(组合数学,高精度)
- Eclipse安装与使用
- springcloud超时时间与重试次数配置
- linux日志分析
- java IO流 对文件操作的代码集合
- 【转】C# GDAL 配置