首页 > 其他 > 详细

关于 基线 的概念及相关属性的使用

时间:2017-04-05 09:37:37      阅读:324      评论:0      收藏:0      [点我收藏+]
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; }

关于 基线 的概念及相关属性的使用

原文:http://www.cnblogs.com/pengfei-nie/p/6667202.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!