一 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. js在html文件中的解析顺序

    我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页面中head部分放置<scri ...

  2. CMake Error: Curses library not found. Please install appropriate package

    编译安装MySQL的时候,出现错误: -- Could NOT find Curses (missing:  CURSES_LIBRARY CURSES_INCLUDE_PATH) CMake Err ...

  3. 1036 Boys vs Girls （25 分）

    1036 Boys vs Girls (25 分) This time you are asked to tell the difference between the lowest grade of ...

  4. JSON Web Token的使用（转载）

    定义 JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 适用场景 1.用于向Web应用传递一些非敏感信息.例如完成加好友.下 ...

  5. 用 tornado 做网站 (7)

    转自:http://wiki.jikexueyuan.com/project/start-learning-python/309.html 用 tornado 做网站 (7) 到上一节结束,其实读者已 ...

  6. API网关Kong系列（四）认证配置

    目前根据业务需要先介绍2种认证插件:Key Authentication 及 HMAC-SHA1 认证  Key Authentication 向API添加密钥身份验证(也称为API密钥). 然后,消 ...

  7. trigger和triggerHandler的使用

    今天琢磨了好久这个trigger和triggerHandler的用法.在网上搜了好多,不过大都是相互抄袭,毛意思都没有.后来自己做了研究. trigger: 1.可以用来触发事件. <input ...

  8. 基于Vue的Ui框架

    基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动 ...

  9. 对象DIY

    1.在java开发中,好代码都是组织的比较好,模拟现实很好,而不是步骤指令 2.对象组织+继承(归类

  10. Delphi RAD Berlin OutputDebugString 输出调试信息

    Delphi RAD Berlin Event Log.OutputDebugString 输出调试信息,仅在win VCL下可以用.OutputDebugString(PChar('hellowor ...