px
px是像素单位，是相对屏幕宽高度而言，一旦设定就无法随浏览器尺寸的改变而改变。
示例：设置padding为30px，宽高100px
<style>
div{
padding: 30px;
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<body>
<div>我是一个div</div>
</body>
em
em是相对长度单位，相对当前元素的字体大小而言。
示例：我们给div设置padding为1em
<style>
div{
padding: 1em;
border: 1px solid black;
}
</style>
<body>
<div>我是一个div</div>
</body>
可以看出默认 1em = 16px （因为默认字体大小为16px）
我们设置font-size为28px，再来看一下：
div{
font-size: 28px;
padding: 1em;
border: 1px solid black;
}
可以看出padding变成了28px，所以em设置的值不是固定的，会随当前元素的字体大小的变化而变化。
rem
rem也是一个相对长度单位，相对的是html元素的字体大小而言的。
示例：给div设置padding为1rem
<style>
div{
padding: 1rem;
border: 1px solid black;
}
</style>
这里1rem也是默认16px。
接下来，我们设置html的字体大小为20px：
html{
font-size: 20px;
}
div{
padding: 1rem;
border: 1px solid black;
}
可以看出padding变成了20px
我们可以再给div标签的文本设置文字大小为28px：
html{
font-size: 20px;
}
div{
padding: 1rem;
border: 1px solid black;
font-size: 28px;
}
可以看出，padding仍然是20px，所以rem相对的是html元素的字体大小而言的。
扫一扫
2008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
