rem和em小插曲

今天突然发现对rem和em的理解有很多的错误

1.对em来说,它的大小是相对于父层font-size来改变,但是如果其自身有font-size属性的话,em会优先考虑自身的font-size;

2 rem是相对于根节点html的font-size来改变的

小例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rem和em</title>
<style type="text/css">
html{
font-size: 20px;

}
.div1{
width:200px;
height: 200px;
border: 1px solid red;
font-size: 20px;
}
.div2{
font-size: 15px;
height: 3rem;
width:3em;
border: 1px solid #000;
margin: 0 auto;
}

</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>

div2的font-size为15px,其宽度为3rm,即为15*3+2=47

当去除自身的font-size,则继承父类的font-siz,即为20*3+3=62;

rem是严格按照html的font-size的大小

注意:font-size一定要大于12px,若你font-size设置为10px,则宽度为12*3+2=38;

浏览器默认的fon-size为12px

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魂祭心

原 利用Appdomain动态加载程序集,

3668
来自专栏PHP在线

jQuery学习笔记

jQuery大部分功能需要根据文档的DOM模型来工作,首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。

1062
来自专栏web前端教室

[视频直播]本周日先行者视频“React多级菜单

第一个知识点,就是递归。 递归往简单了说,就是函数不断调用自身,同时设定一个退出条件,达成条件就结束调用自身,否则就成无限递归了。 看一小段JSON: { ...

2219
来自专栏禹都一只猫博客

Go语言简介 — 特性

1191
来自专栏Google Dart

AngularDart 4.0 高级-结构指令 顶

本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己的结构指令来完成相同的操作。

1322
来自专栏别先生

jQuery/javascript实现网页注册的表单验证

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>注册表单验证</title> 5 <...

2566
来自专栏超然的博客

react入门——慕课网笔记

  1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性

1022
来自专栏老九学堂

【干货】20K以上的高薪Java必掌握的基础知识点(二)

怎么样!上一期的知识点小伙伴都掌握了多少呢?复习的同时有没有查漏补缺的巩固自己的基础知识呢?今天我们来复习Java基础知识第二期! 61、Math 类提供了许多...

3817
来自专栏向治洪

深入理解React Native页面构建渲染原理

前言 React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。 基本概念解释 React 是...

3999
来自专栏iOSer成长记录

iOS-自定义TextField(解决输入限制,键盘弹出问题)

1392

扫码关注云+社区

领取腾讯云代金券