px、em、rem

1、px

1个px相当于一个像素

2、em

em是相对的长度单位,既然是相对的长度单位,那么一定有一个参照对象。

  1. em 相对参照对象为父元素的font-size
  2. em具有继承的特点,如果em的父元素没有设置font-size,那么它会去找他父元素的父元素,一级级的往上找,知道找到位置
  3. 当没有设置font-size时,浏览器会有一个默认的em设置,一般设置为:1em = 16px

3、rem

rem也是相对的长度单位,参照对象为根元素html,参照物固定不变,所以比较好计算。

  • 当没有设置font-size时,浏览器会有一个默认的rem设置,一般设置为:1rem = 16px
  • 若根元素html字体大小设置为:font-size:62.5% ,则 1rem = 10px (10/16*100%)
  • 若根元素html字体大小设置为:font-size:100% ,则1rem = 16px

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

vue—你必须知道的

不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文...

1442
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

662
来自专栏练小习的专栏

可视化格式模型-包含块

一个元素box的定位和尺寸,有时候会跟某一矩形框有关,这个矩形框,就被称作元素的包含块。而元素会为它的子孙元素创建包含块,那么,是不是说,元素的包含块就是它的父...

2058
来自专栏偏前端工程师的驿站

CSS魔法堂:更丰富的前端动效by CSS Animation

 在《CSS魔法堂:Transition就这么好玩》中我们了解到对于简单的补间动画,我们可以通过transition实现。那到底多简单的动画适合用transti...

2054
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

3815
来自专栏Web 开发

平时我几乎不用的CSS相关内容

设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间 如果希望对象为可视,其父对象也必须是可视的。

700
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

2.7K8
来自专栏视觉求索无尽也

Markdown:入门

在 Markdown 中,你只需要在文本前面加上 # 即可,同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题,总共六级,只需要增加 # 即可,...

1251
来自专栏数据小魔方

符号图表——特殊字体柱形图

今天跟大家分享的是升级版的符号图表——特殊字体柱形图! ▽▼▽ 忘了是那一期,跟大家分享过如何用特殊字体+rept函数做条形图,今天要跟大家分享的符号图表同样是...

3924
来自专栏天天

20171024

1173

扫码关注云+社区

领取腾讯云代金券