一 window对象的innerWidth、outerWidth

innerWidth是可用区域的宽度（内容区 + 滚动条）

outerWidth是浏览器窗口的宽度（可用区域的宽度+审查元素区域的宽度）

二 HTMLELement对象的offsetWidth、clientWidth、width

width是纯内容区

clientWidth是纯内容区+补丁

offsetWidth是纯内容区+补丁+边框+滚动条

说明：

1 桌面版浏览器（chrome、Safari）的滚动条占用HTMLElement的宽度（会导致HTMLElement的宽度减少15px）

移动版浏览器（Chrome、Safari）的滚动条不占用HTMLELement的宽度

2 getBoundingClientRect().right-getBoundingClientRect().left与offsetWidth意义相同，但前者提供精确的小数，而offsetWidth是整数。

3 Framework框架的Dom7的outerWidth()实际上是offsetWidth+margin

三 示例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

        <title>各种宽度</title>

        <style type="text/css">

            *{margin:0;border: none;padding: 0;}

            .outer{

                margin:9px;

                border:7px solid black;

                padding:3px;

                width:300px;

                height: 100px;

                overflow-y: auto;

                background-color: gray;

            }

            .inner{

                height: 1000px;;

            }

        </style>

        <script>

            document.addEventListener('DOMContentLoaded',function(e){

                // window的各种width

                console.log(`innerWidth : ${window.innerWidth} , outerWidth : ${window.outerWidth}`);

                // HTMLElement的各种width

                let outer = document.querySelector('#outer');

                let styles = document.defaultView.getComputedStyle(outer,null);

                console.log(`offsetWidth : ${outer.offsetWidth} , clientWidth :  ${outer.clientWidth}, width : ${outer.width}`);

            },false);

        </script>

    </head>

    <body>

        <div id="outer" class="outer">

            <div class="inner">

            </div>

        </div>

        <div id="box2" style="height:2000px;"></div>

    </body>

</html>

CSS中的各种width（宽度）的更多相关文章

  1. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  2. css中的width,height，属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

  3. 【CSS中width、height的默认值】

    对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...

  4. CSS中width和height与盒子模型的关系

    盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...

  5. Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...

  6. table中的td限制宽度width也不能让字符过长变成省略号生效？

    table中的td限制宽度width也不能让字符过长变成省略号生效? http://blog.csdn.net/java_mr_zheng/article/details/49423247 CSS t ...

  7. 理解css中min-width和max-width，width与它们之间的区别联系

    css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width.就被它们的值所代替,尤其适 ...

  8. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  9. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

随机推荐

  1. numpy的where函数

    numpy.where(condition[,x,y]) condition是条件,x,y是可选参数,这三个输入参数都是array_like的形式且三者的维度相同 当conditon的某个位置为tru ...

  2. xgboost的遗传算法调参

    遗传算法适应度的选择: 机器学习的适应度可以是任何性能指标 —准确度,精确度,召回率,F1分数等等.根据适应度值,我们选择表现最佳的父母(“适者生存”),作为幸存的种群. 交配: 存活下来的群体中的父 ...

  3. jps命令发生异常

    当在集群里输入jps命令时报如下错误: 我就开始检查jdk,感觉应该是centos自动的jdk没卸载干净跟后面安装的jdk冲突 先通过命令 rpm -qa|grep java 查看jdk信息 把这几个 ...

  4. linux开机启动详细流程图

    linux开机启动详细流程图: 一.BIOS 加电自检当你按电源开关开机时,电脑会首先去启动BIOS(基本输入输出系统),BIOS一般是集成在主板上的.BIOS 的工作1.检测连接硬件,比如显卡,内存 ...

  5. /PROC/MEMINFO之谜

    网站转自:http://linuxperf.com/?p=142 非常技术的网站,够看上一阵子的(一篇文章) /proc/meminfo是了解Linux系统内存使用状况的主要接口,我们最常用的”fre ...

  6. SQL Server 2016将内置R语言

    题记:随着大数据成为一个BuzzWord,和大数据相关的技术也变得越来越火热,其中就包括R语言.而据说SQL Server 2016将会内置R语言支持? R语言作为一个存在很久的语言,在大数据热炒之后 ...

  7. 包与常用模块：time，sys。

    一  包的初识: 首先包在pycharm中的表现形式为packa文件夹:在python3种那么我们创建一个packa时会发现下边会自动跟一个—init—.py文件 包的定义:包就是一个包含有——ini ...

  8. myeclipse中格式化代码快捷键Ctrl+Shift+F失效的解决办法

    任何软件快捷键失效99%的原因是跟其他软件的快捷键冲突了,经过检查,是跟搜狗输入法的简繁体切换快捷键Ctrl+Shift+F 冲突了,打开搜狗工具箱中的属性设置: 在属性设置中找到“按键”,将简繁体快 ...

  9. QT中使用自己定的类和Vector出现错误

    关于QT自定义类不能调用问题: 在Main()函数里面一定要定义include“XXX.cpp”include“XXX.h”,具体原因我也不知道为什么这样定义,是在一个贴吧看见的,弄了好久才解决. 第 ...

  10. 手机app/h5页面http请求抓包调试

    1.抓包机器跟客户端手机连上同一wifi热点,最好是第三者提供的移动wifi,公司内网wifi网络访问有限制. 2.设置手机客户端http代理 三者关系图示: