什么是 em
-
em 是前端开发中的一个动态单位, 是一个相对于元素字体大小 的单位 - 例如：
font-size: 12px;, 那么1em 就等于12px
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 200px;
background: yellow;
}
.son {
font-size: 10px;
width: 10em;
height: 10em;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
em 特点
- 当前元素设置了字体大小, 那么就相对于当前元素的字体大小(这个如上已经演示过了)
- 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小来进行参考
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 200px;
font-size: 10px;
background: yellow;
}
.son {
width: 10em;
height: 10em;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
- 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于
浏览器 默认的字体大小
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 200px;
background: yellow;
}
.son {
width: 10em;
height: 10em;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
结论:
em 是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)
