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

相关文章

来自专栏IMWeb前端团队

开源跨平台移动项目Ngui【Action动作系统】

Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合Nod...

2045
来自专栏前端说吧

Vue-组件嵌套之——父组件向子组件传值

3299
来自专栏前端小作坊

原型链上的DOM Attributes

Chrome开发小组最近发表声明他们正在將DOM properties移动到原型链中。这个更新将会在Chrome 43(2015年4月发布beta版本)中实现。...

963
来自专栏葡萄城控件技术团队

CSS变量(自定义属性)实践指南

Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少...

681
来自专栏葡萄城控件技术团队

深入解析 DataGrid 过滤功能

过滤是DataGrid这样的表格控件的基本功能之一,也是非常重要的特性。微软提供的标准DataGrid相信大家都很熟悉了。本文要解析的不是标准DataGrid,...

1937
来自专栏软件开发

一个小时学会jQuery

前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法。 一、jQuery简介...

1877
来自专栏天天

$.ajax()

815
来自专栏Java技术分享

30天轻松掌握JavaWeb-学习目录

17.使用beanUtils操纵javabean

2176
来自专栏前端新视界

Vue.js 系列教程 1:渲染,指令,事件

原文:intro-to-vue-1-rendering-directives-events 译者:nzbin 如果要我用一句话描述使用 Vue 的经历,我可...

1899
来自专栏十月梦想

vue入门基础详解之父子通讯

子组件需要监控一个事件,然后在实例中执行这个方法就行,函数参数可以传递data,然后在实例中执行改方法!

452

扫码关注云+社区