CSS中的各种width（宽度）

最新推荐文章于 2023-03-27 10:14:31 发布

会做饭的技术男

最新推荐文章于 2023-03-27 10:14:31 发布

阅读量4.9k

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2bj2ih2hcbb.html

版权

前端专栏收录该内容

2508 篇文章 11 订阅

订阅专栏

一 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>

会做饭的技术男

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中的各种width（宽度）

一 window对象的innerWidth、outerWidthinnerWidth是可用区域的宽度（内容区 + 滚动条）outerWidth是浏览器窗口的宽度（可用区域的宽度+审查元素区域的宽度）二 HTMLELement对象的offsetWidth、clientWidth、widthwidth是纯内容区clientWidth是纯内容区+补丁offsetWidth是纯内容区+补丁+边框+滚动条说明：1 桌面版浏览器（chrome、Safari）的滚动条占用HTMLElement的宽度（会导
复制链接

扫一扫