zoukankan      html  css  js  c++  java
  • CSS单位,em,rem以及元素的宽度和高度

    一、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有变动,才有变化

  • 相关阅读:
    js事件委托篇(附js一般写法和js、jq事件委托写法)
    markdown工作随笔总结
    论实际开发中按钮显示和隐藏自身或其他元素
    彻底理解行内元素和块级元素,不必硬背
    redis搭建主从配置
    [Python图像处理]三.获取图像属性及通道处理
    [Python图像处理]二 OpenCV借助Numpy库读取和修改像素
    [Python图像处理]一.图像处理基础知识及OpenCV入门函数
    opencv2图像处理--灰度变换
    提取新闻网站信息
  • 原文地址:https://www.cnblogs.com/lastnigtic/p/6853460.html
Copyright © 2011-2022 走看看