今天突然发现对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
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有