前端开发常用单位-em
什么是 em
em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位- 例如：
font-size: 12px;, 那么1em就等于12px
<!DOCTYPE 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 {
font-size: 10px;
width: 10em;
height: 10em;
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
em 特点
- 当前元素设置了字体大小, 那么就相对于当前元素的字体大小(这个如上已经演示过了)
- 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小来进行参考
<!DOCTYPE html>
<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>
- 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于
浏览器默认的字体大小
<!DOCTYPE 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是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)
