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*/