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 条评论
登录 后参与评论

相关文章

来自专栏Android开发经验

自定义view——圆形进度条的实现

1191
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

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

1.6K7
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,...

2027
来自专栏Web 开发

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

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

630
来自专栏小灰灰

im4java + imagemagic 搭建一个图片处理服务

imagemagic + im4java 进行图片处理 利用 imagemagic 对图片进行处理,java工程中,使用im4java来操作imagemagi...

2477
来自专栏数据小魔方

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

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

3744
来自专栏进击的君君的前端之路

CSS常见样式(二)

1372
来自专栏菜鸟计划

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

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

3655
来自专栏天天

20171024

1033
来自专栏菜鸟计划

vue class与style 绑定详解——小白速会

一、绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success'...

3745

扫码关注云+社区