em单位
- 是一个相对单位,相对于盒子自身的字号大小
<style>
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
}
.box {
/*
em 是一个相对单位,相对于盒子自身的字号大小
rem 是一个相对单位,相对于 html 标签的字号大小( html 标签是页面的 root 根标签 )
*/
font-size: 30px;
text-indent: 2rem;
width: 10rem; /* 10 * 10px = 100px */
height: 10rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</div>
</body>
</html>
rem单位
- 是一个相对单位,相对于 html 标签的字号大小( html 标签是页面的 root 根标签)
<style>
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
}
.box {
/*
em 是一个相对单位,相对于盒子自身的字号大小
rem 是一个相对单位,相对于 html 标签的字号大小( html 标签是页面的 root 根标签 )
*/
font-size: 30px;
text-indent: 2rem;
width: 10rem; /* 10 * 10px = 100px */
height: 10rem;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</div>
</body>
</html>