首页 > 代码库 > CSS单位，em,rem以及元素的宽度和高度

CSS单位，em,rem以及元素的宽度和高度

2024-09-22 04:24:57   214人阅读

一、em和rem

说到自适应布局，就不得不提到rem这个单位。

简单的说

  • em: 就是字体大小，根据元素自身的字体大小来定，如果自身没有定义字体大小，则继承父元素的字体大小，即1em = 1 font-size;
  • rem: 和em差不多，可以看成是root-em，是根据根元素的字体大小来定义的，即html设置的字体大小来定义，默认html的字体大小是16px；

用一个demo来说明最好：

<style>
html{
    font-size: 50px;
}
    #wrapper{
        font-size: 40px;
        background-color:red;
        width:2em;
        height: 2em;
    }
    #outter{
        font-size: 20px;
        background-color: yellow;
        width: 2em;
        height: 2em;
    }
    #inner{
        font-size: 10px;
        background: blue;
        width: 2em;
        height: 2em;
    }
    #wrapper-1{
        font-size: 40px;
        background-color:red;
        width:2rem;
        height: 2rem;
    }
    #outter-1{
        font-size: 20px;
        background-color: yellow;
        width: 2rem;
        height: 2rem;
    }
    #inner-1{
        font-size: 10px;
        background: blue;
        width: 2rem;
        height: 2rem;
    }
</style>
<body>
    <div id = ‘wrapper‘>
        <div id = ‘outter‘>
            <div id = ‘inner‘>0</div>
        </div>
    </div>
    <div id = ‘wrapper-1‘>
        <div id = ‘outter-1‘>
            <div id = ‘inner-1‘>1</div>
        </div>
    </div>
</body>

结果如图，上为用em，为rem

技术分享

可以看到用em的大小根据自身元素字体大小的变化而变化，而用rem则不会，一直以根font-size为标准。

 

二、宽度和高度

单我想获取上面元素的宽度时，我习惯的用了：

document.getElementById(‘wrapper‘).style.width // 结果是“”

找了一下资料，发现这是查找设置了的css元素属性时使用的，而一般应该用以下方法：

1.clientWidth和clientHeight

var width = el.clientWidth;
var height = el.clienHeight;

说明：padding和scroll变动，才有变化

2.scrollWidth 和box.scrollHeight

var width = el.scrollWidth;
var height = el.scrollHeight;

说明，1）border变化，不同浏览器有不同变化2）padding变化，有变化3)margin变化，无变化

3.offsetWidth和offsetHeight

var width = el.offsetWidth;
var height = el.offsetHeight;

说明，padding和border有变动，才有变化

CSS单位，em,rem以及元素的宽度和高度


联系
我们