关于基线baseline及与inline-block、vertical-aline等属性的关系(完善中.......)

时间:2020-11-27 12:04:50
1. 基本含义
基线(base line):而是英文字母x的下端沿,是a,c,z,x等字母的底边线,并不是汉字文字的下端沿,。下图的红色线即为基线。凡是涉及到垂直方向的排版或者对齐的,都离不开最最基本的基线
 
 
 
关于基线baseline及与inline-block、vertical-aline等属性的关系(完善中.......)
关于基线baseline及与inline-block、vertical-aline等属性的关系(完善中.......)
 
 
 
 
 
 
 
 
 
 
 
 
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; }