你不知道的css——4. 基线、中线、x-height、单位ex（含文本与图标对齐技巧）

字母x的下边缘（线）就是CSS中的基线。

ascender height: 上行线高度。
cap height:大写字母高度。
median: 中线。
baseline：基线
descender height:下行线高度。

x-height —— 小写字母x的高度，基线和等分线（mean line，也称作中线 midline）之间的距离。

ex是CSS中的一个相对单位，指的是小写字母x的高度，即x-height。

使用ex实现文本与图标对齐

<template><div style="padding: 20px;font-size: 30px">无论字体多大，ex都能实现文字和图标对齐<i class="icon-arrow"></i></div>
</template>
<style scoped>.icon-arrow {display: inline-block;width: 20px;height: 1ex;background: url(https://demo.cssworld.cn/images/5/arrow.png) no-repeat center;}
</style>

你不知道的css——4. 基线、中线、x-height、单位ex（含文本与图标对齐技巧）相关推荐

min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值
min-width.max-width属性中min-content.max-content的含义,css中minmax()用法.1fr单位的含义 min-width 表示容器的最小宽度 max-wid ...
真正的能理解CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
[css] 如何解决html设置height：100%无效的问题？
[css] 如何解决html设置height:100%无效的问题? 在外层包一个给定高度的 div 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
HTML5支持rpx,css小程序的元素尺寸单位px，rpx及rem
css小程序的元素尺寸单位px,rpx及rem的简明理解.0b7d08f 做小程序和做网页是不一样的.需要理解换算一下单位.fcb0b 0b7d08f rpxa741a29f 微信小程序单位,小程序规 ...
html字体怎么是什么属性,你不知道的CSS字体属性
原标题:你不知道的CSS字体属性如果你对于CSS技巧没有深入地了解,这篇文章会让你知道一些控制字体加载的技巧. CSS的字体显示属性在Blink-based浏览器中可以被使用.它使你能够发现浏览器的 ...
HTML绝对单位,CSS长度单位有绝对单位和相对单位，其中px就是绝对单位，em就是相对单位。...
CSS长度单位有绝对单位和相对单位,其中px就是绝对单位,em就是相对单位. 妊娠12周内,胚胎自然殒堕者称() 某苛性钾样品中含有不与酸反应的杂质,为了测定苛性钾的纯度,取样品0.5600g溶于水制 ...
CSS中的几种尺寸单位
一.尺寸单位 CSS 支持多种尺寸单位,包括: px:像素,固定大小单位 em:相对于当前元素字体大小的单位 rem:相对于根元素(HTML)字体大小的单位 %:相对于父元素的百分比单位 vh:相对于 ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...

你不知道的css——4. 基线、中线、x-height、单位ex（含文本与图标对齐技巧）

使用ex实现文本与图标对齐

你不知道的css——4. 基线、中线、x-height、单位ex（含文本与图标对齐技巧）相关推荐

最新文章

热门文章