CSS rem 和 em
发表于 ： 2024-07-07 10:18
1、em单位
em:长度单位，它是参照当前元素的字号，如果没有设置，就参照父容器，一直到浏览器的默认字号大小
em 是相对长度单位（参照父元素），其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小。
例如：当前盒子的字号大小为:
2、rem单位
rem：也是长度单位，但不同的是，rem参照的是 html的字体大小，而为元素设置宽高的，而不是参照自身字号，或者父元素的字号
例如：
em:长度单位，它是参照当前元素的字号，如果没有设置，就参照父容器，一直到浏览器的默认字号大小
em 是相对长度单位（参照父元素），其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小。
例如：当前盒子的字号大小为:
代码： 全选
.box {
font-size:16px;
width:10em;
height:10em;
}
/*那么此时，盒子宽高为 160px X 160px*/
rem：也是长度单位，但不同的是，rem参照的是 html的字体大小，而为元素设置宽高的，而不是参照自身字号，或者父元素的字号
例如：
代码： 全选
/*浏览器的默认字号是：16px*/
.remBox {
width:10em;
height:10em;
font-size:12px;
}
/*此时盒子大小不是 120X120，而是160X160*/