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; }

最新文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统--系统权限全套完整图
  2. 如何用Python实现目录遍历
  3. C#中常用的字符串加密,解密方法封装,包含只加密,不解密的方法
  4. Oracle Goldengate工作原理
  5. QT_校园导航(绘制路线已实现)_Updata_详细注释
  6. 详解android:scaleType属性
  7. HDU 5033 Building(单调栈)
  8. centos 6 安装docker
  9. 关于在官网上下载Eclipse遇到的问题!!
  10. node-webkit制作桌面应用
  11. Python开发简单爬虫(二)---爬取百度百科页面数据
  12. 【Spring Cloud笔记】Eureka注册中心增加权限认证
  13. Attention Model
  14. React createRef:引用
  15. 【BZOJ2227】[ZJOI2011]看电影(组合数学,高精度)
  16. Eclipse安装与使用
  17. springcloud超时时间与重试次数配置
  18. linux日志分析
  19. java IO流 对文件操作的代码集合
  20. 【转】C# GDAL 配置

热门文章

  1. os x下如何挂载iso镜像
  2. masm6.11的BUG?
  3. ubunut在系统恢复模式下无法修改root密码的分析和解决
  4. SQLSERVER 性能优化之Perfmon指标
  5. JVM如何理解Java泛型类
  6. 修改访问的后缀contant
  7. PyCOn2013大会笔记
  8. c#与webapi交互
  9. Nowcoder84D
  10. Html5列表元素