博主信息
博文 25
粉丝 0
评论 0
访问量 14090
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
前端开发20221024-1
P粉114035831
原创
1017人浏览过

em与rem的区别

em与rem的特点

em

em是一个相对单位。em的值并不是固定的。em会继承父元素的字体大小。如果当前文本的字体尺寸没有设置,则相对于浏览器的默认字体尺寸。1em=16px

rem

rem是相对于HTML根元素。1rem=100px。rem为元素设定字体大小的时候,是相对于根元素进行计算的。当我们改弯根元素下的字体大小时,下面的大小都会改变。通过rem既可以做到只修改根无素就可以成比例的调整所有字体,又可以避免字体大小逐层复合的连锁反应。

<html>
<head>
<title>em与rem的区别</title>
<stye>
{ html{font-size:100px;}

box1{font-size:16px;}

box2{font-size:3em;}

box3{font-size:0.48rem;}}

</stye>
</head>
<body>
<div id="box1">
<div id="box2">测试文字A</div>
</div>
<br />
em会继承父元素的字体大小
<div id="box1">
<div id="box3">测试文字B</div>
</div>
<br />
1rem=100px.设定字体大小的时候,是相对于根元素进行计算的
rem还支持元素宽、高等属性
</body>
</html>
用rem时,则只需要设置HTML根元素的数值,则会对全部的rem做出直接改变。层级相对比较少。

批改老师:PHPzPHPz

批改状态:合格

老师批语:代码内容可以写在代码块中,这样会有高亮显示方便阅读
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学