- em是一个相对单位 相对的是当前的文字的大小 1em = 一个文字大小
- px也是一个单位 意味着可以使用px的地方 也可以使用em代替
- rem也是一个相对单位, 参照的是html的font-size的取值 1rem = html的font-size;
- px,em,rem都是单位 意味着都可以转换使用 (PC端不要使用rem)
- em的弊端: 永远参照的是当前的文字, 所以 即使em的取值完成一样 但是font-size不同 结果完成不同;
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
font-size: 50px;
}
.box{
width: 400px;
height: 200px;
background-color:skyblue;
/* font-size: 16px; */
/* em就【font-size】近取值 */
text-indent: 2em;
}
.box2{
font-size: 20px;
/* rem参照的是html的font-size的取值 */
width: 12.5rem;
height:2rem; /* 100/50 */
background-color:pink;
}
</style>
</head>
<body>
<div class="box">内容区域</div>
<div class="box2">内容区域2</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
