CSS中rem、em的区别
引用文档：http://www.divcss5.com/html/h529.shtml；http://blog.csdn.net/qq_35432904/article/details/51804227
前几天面试了一个最基本的问题，现在复习一下它的原理
CSS中的长度单位有8个，px,em,rem,pt,ex,pc,in,mm,cm;
px--像素，相对于设备的长度，像素是相对于显示器的屏幕分辨率而言的。
em--相对长度单位，是相对于其父元素的文本的字体尺寸。如果父级元素未设置字体大小，则相对于浏览器的默认字体
ex--相对长度单位。相对于字符‘x’的高度。
pt--点（point），绝对长度单位
pc--派卡（pica）,绝对长队单位
in--英寸（inch),绝对长度单位
mm--毫米，绝对长度单位
cm--厘米，绝对长度单位
1in = 2.54cm = 25.4 mm = 72pt = 6pc ；
这些绝对单位在项目中很少用，常用的是相对单位：px,em,rem
一、rem的特点
1、rem的大小是根据html根目录下的字体大小进行计算的
2、当我们改变根目录下的字体大小时，下面的字体都会随之改变
3、rem不仅可设置字体的大小，也可设置元素的宽高，内外间距等
二、em的特点
em的字体大小是根据其父元素的大小设置的
三、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中rem与em的区别</title>
<style>
html,body{
/*设置了html的字体大小*/
font-size: 100px; }
.container{
width:3rem;
height:3rem;
background-color: #dddddd;
}
.boxConter{
width:1.5rem;
height:1.5rem;
background-color: aqua;
}
.item{
width:0.5rem;
height:0.5rem;
background-color: red;
}
.emContainer{
width:5rem;
height:5rem;
background-color: blueviolet;
font-size: 50px; }
.emBoxConter{
width:1.5em;
height:1.5em;
background-color: blue;
font-size: 80px;
}
.emItem{
width:0.5em;
height:0.5em;
background-color: chartreuse;
}
</style>
</head>
<body>
<!--rem的代码-->
<div class="container">
<div class="boxConter">
<div class="item"></div>
</div>
</div>
<hr>
<hr>
<!--em的代码-->
<div class="emContainer">
<div class="emBoxConter">
<div class="emItem"></div>
</div>
</div>
<hr>
<hr>
<hr>
</body>
</html>
CSS中rem、em的区别的更多相关文章
- css中单位em和rem
一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...
- css中的em 简单教程 -- 转
先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...
- CSS中的EM属性之弹性布局
这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- 简谈CSS 中的 em，rem，px，%
在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...
- px,rem,em的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- css中px em rem vw vh vmax vmin等单位的区别--转载
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- 深度解析CSS中的单位以及区别
css中有几个不同的单位表示长度,使用时数字加单位.如果长度为0,则可以省略单位. 长度单位可分为两种类型:相对和绝对. 绝对长度 绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器.分辨 ...
随机推荐
- mysql 创建用户与授权
权限管理 我们都知道,最高权限管理者是 root 用户 , 它拥有着最高的权限操作,包括 : select(查询) ,update(修改) , delete(删除,有事没事都不要用这个,反正也不能给这 ...
- redis下载及安装服务
1 . 要安装Redis,首先要获取安装包. Windows的Redis安装包需要到以下GitHub链接找到. 链接:https://github.com/MSOpenTech/redis 打开网站后 ...
- 电话聊天狂人 【STL】
7-2 电话聊天狂人(25 分) 给定大量手机用户通话记录,找出其中通话次数最多的聊天狂人. 输入格式: 输入首先给出正整数N(≤105),为通话记录条数.随后N行,每行给出一条通话记录.简单起 ...
- git设置只允许特定类型的文件
git设置只允许特定类型的文件 # 忽略所有文件 * # 不忽略目录 !*/ # 不忽略文件.gitignore和*.foo !.gitignore !*.foo
- Storm worker 并行度等理解
Storm 调优是非常重要的, 仅次于写出正确的代码, 好在Storm官网上有关于worker executors tasks的介绍, http://storm.incubator.apache.or ...
- 分享知识-快乐自己：java 中的访问修饰符
1):Java中的访问修饰符: Java面向对象的基本思想之一是封装细节并且公开接口.Java语言采用访问控制修饰符来控制类及类的方法和变量的访问权限,从而向使用者暴露接口,但隐藏实现细节. 访问控制 ...
- 微软面试题：鸡蛋从第N层及以上的楼层落下会摔破
from:https://blog.csdn.net/qq_18425655/article/details/52326709 题目: 有一栋楼共100层,一个鸡蛋从第N层及以上的楼层落下来会摔破 ...
- android自定义控件(一) 官方文档的翻译
构建自定义组件 Android中,你的应用程序程序与View类组件有着一种固定的联系,例如按钮(Button).文本框(TextView),可编辑文本框(EditText),列表框(ListView) ...
- 解决 maps to localhost, but this does not map back to the address
修改 /etc/ssh/ssh_config vim /etc/ssh/ssh_config GSSAPIAuthentication no
- HihoCoder1653 : 公平分队（[Offer收割]编程练习赛39）（贪心）
描述 小Hi和小Ho在玩一个战争游戏.游戏中2N个战斗单位,其中第i个单位的战斗力是Ai. 现在小Hi和小Ho要各选N个单位组成队伍,当然他们都希望自己队伍的总战斗力越大越好. 为了使分队更加公平,经 ...