Css - 长度单位px、pt、em、rem
2019-10-19 本文已影响0人
ElricTang
一. 相对长度单位
1. em是相对于当前元素的字体大小。（设置font-size时特殊）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
font-size:30px;
}
.p1{
font-size:20px;
text-indent:1em;
}
.p2{
font-size:20px;
text-indent:20px;
}
.p3{
text-indent:1em;
}
</style>
</head>
<body>
<div>
<p class="p1">hello world - 设置了自身元素的字体大小</p>
<p class="p2">hello world - 设置了自身元素的字体大小</p>
<p class="p3">hello world - 没有设置自身元素字体大小</p>
</div>
</body>
</html>
- 我们设置父元素
div字体大小为30px -
p1设置了自身元素的字体大小为20px，缩进设置为1em。 -
p2设置了自身元素的字体大小为20px，缩进设置为20px。 - 最终效果，
p1和p2的字体大小都为20px，缩进都为20px，和明显text-indent内的em是相对于自身元素的字体大小计算的。 -
p3没有设置自身元素的字体大小，最终效果是：字体大小为30px，缩进也为30px。 - 既然如此，那
em不是相对于父元素字体大小吗？p3其实是继承了继承了父元素的字体大小，也就是说p3的font-size也是30px，然后text-indent的em其实也是根据p3的自身元素字体大小计算的。
为什么有时候说em是根据父元素的字体大小计算呢？
- 因为在设置
font-size的时候可以这么理解。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
font-size:30px;
}
p{
font-size:1em;
}
</style>
</head>
<body>
<div>
<p>hello world</p>
</div>
</body>
</html>
- 在给子元素设置
font-size时发现em的确是相对于父元素的字体大小。其实也很好理解，因为设置子元素的font-size时，元素的字体大小还没有，那怎么参考自己呢？答案就是参考父元素。
2. rem是全部的长度都相对于根元素<html>
- em需要考虑父元素的关系，html的结构有时候是比较复杂的，每次使用em都要考虑的话不利于维护。
- rem直接统一参考系为根元素，每次使用rem时先设置
<html>的字体大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{
font-size:25px;
}
p{
font-size:2rem;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
