CSS 的相对单位 em 与 ex

相对单位之所以得名，是因为它们是根据与其他事物的关系来度量的，共有3种相对长度单位：em、ex 和 px。

前两个单位代表 em-height 和 x-height，这是常用的印刷度量单位。

而 px 代表“像素”，这个值被定义为相对单位，因为它取决于显示设备的分辨率。

em

在 CSS 中，em 定义为一种给定字体的 font-size 值。如果一个元素的 font-size: 14px，那么对于该元素，1em = 14px。

例如一个 h1 的字体大小为 24px，一个 h2 字体大小为 18px，一个 h3 字体大小为12px，如果给这三个元素设置 margin-left: 1em;，那么它们的左边距就分别为 24px、18px、12px。

h1, h2, h3 {margin-left: 1em;}

  <h1>hello h1</h1><h2>hello h2</h2><h3>hello h3</h3>

注意下图三行的左边距

em 这个单位非常灵活，比如首行缩进两个字符的实现就可以用到 em：text-indent: 2em;

ex

和 em 不同的是，ex 是指所用字体中小写 x 的高度，通常为字体高度的一半。

  div {display: inline-block;font-size: 18px;}.x {width: 50px;height: 1ex;background: red;}

  <h4>定义一条与 x 一样高的线</h4><div>yyypppxxx</div><div class="x"></div>

效果如下，注意红色盒子高度只与 x 一致

CSS 的相对单位 em 与 ex相关推荐

css中单位em和rem
一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...
html像素和em转换,初识HTML(5)+CSS(3)-2020升级版 - 像素px：相对单位em：就是本元素给定字...
像素px:相对单位 em:就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px 百分比:font-size的百分比初识HTML(5 ...
CSS尺寸和字体单位-em、px还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明, 重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置 ...
css font size 单位,css中font-size的单位总结：px、em、pt
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的. em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是 ...
CSS中强大的EM 单位
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
ie不支持css变量,新版Bootstrap 4 不支持IE8 CSS采用rem和em单位
新版Bootstrap 4 不支持IE8 CSS采用rem和em单位 8月 28, 2015 发表于: 前端开发. 评论 Sponsor 2015年8月19日是Bootstrap诞生四周年,Boots ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...
css_04 | CSS——CSS 值和单位
本文推荐 PC 端阅读~本文版权归 "公众号 | 前端一万小时" 所有,未经授权,请勿转载! 复制代码 css_04 复制代码 1. 你有没有使用过视网膜分辨率的图形?当中使用什么 ...
css中px、em和rem的区别总结
前言 em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值.浏览器使 ...
CSS长度单位及区别 em ex px pt in
1. css相对长度单位 Ø em 元素的字体高度 Ø ex 字体x的高度 Ø px ...

CSS 的相对单位 em 与 ex

em

ex

CSS 的相对单位 em 与 ex相关推荐

最新文章

热门文章