分页: 1 / 1

CSS rem 和 em

发表于 : 2024-07-07 10:18
rungod
1、em单位

em:长度单位,它是参照当前元素的字号,如果没有设置,就参照父容器,一直到浏览器的默认字号大小
em 是相对长度单位(参照父元素),其参照当前元素字号大小,如果当前元素未设置字号则会继承其祖先元素字号大小。

例如:当前盒子的字号大小为:

代码: 全选

.box {
font-size:16px;
width:10em;
height:10em;
}
/*那么此时,盒子宽高为 160px X 160px*/
 
2、rem单位

rem:也是长度单位,但不同的是,rem参照的是 html的字体大小,而为元素设置宽高的,而不是参照自身字号,或者父元素的字号

例如:

代码: 全选

/*浏览器的默认字号是:16px*/
.remBox {
width:10em;
height:10em;
font-size:12px;
}
/*此时盒子大小不是 120X120,而是160X160*/