一、 rem的特点：
1、rem的大小是根据html根目录下的字体大小进行计算的。
2、当我们改变根目录下的字体大小的时候，下面字体都改变。
3、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。
二、em的特点：
1、字体大小是根据父元素字体大小设置的。
三、代码部分
1、rem的代码。
<html> <head lang="en"> <meta charset="UTF-8"> <title>rem
title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ font-size:12px; } .outer{ font-size:3rem; background:red; width:400px; height:400px; position: relative; } .middle{ font-size:2rem; background: aqua; width:200px; height: 200px; position: absolute; left:100px; top:100px; } .inner{ font-size:1rem; background: palegreen; width:100px; height:100px; position: absolute; left:50px; top:50px; }
style>
head> <body> <div class="outer"> 外部 <div class="middle"> 中间 <div class="inner">内部
div>
div>
div>
body>
html>1、em的代码
<html> <head lang="en"> <meta charset="UTF-8"> <title>rem
title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ font-size:12px; } .outer{ font-size:3em; background:red; width:800px; height:800px; position: relative; } .middle{ font-size:2em; background: aqua; width:400px; height: 400px; position: absolute; left:200px; top:200px; } .inner{ font-size:1em; background: palegreen; width:200px; height:200px; position: absolute; left:100px; top:100px; }
style>
head> <body> <div class="outer"> 外部 <div class="middle"> 中间 <div class="inner">内部
div>
div>
div>
body>
html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/227127.html原文链接：https://javaforall.net
