软件教程 2025年08月6日
0 收藏 0 点赞 272 浏览 3726 个字
摘要 :

文章目录 一、深入理解两种盒模型 (一)标准盒模型(content-box) (二)IE盒模型(border-box) 二、DOM元素的宽高属性详解 (一)offsetWidth / offsetHeight (……




  • 一、深入理解两种盒模型
    • (一)标准盒模型(content-box)
    • (二)IE盒模型(border-box)
  • 二、DOM元素的宽高属性详解
    • (一)offsetWidth / offsetHeight
    • (二)clientWidth / clientHeight
    • (三)getBoundingClientRect
    • (四)scroll相关属性和方法

    很多前端开发朋友对于理解DOM元素的尺寸以及相关的盒模型、宽高属性仍有不足,但它们直接影响页面的布局和显示效果,今天就来深入探讨一下这些知识。

    一、深入理解两种盒模型

    在CSS中,box-sizing属性用于控制盒模型的类型,主要有两种盒模型:标准盒模型和IE盒模型。

    (一)标准盒模型(content-box)

    在标准盒模型下,widthheight仅仅表示元素内容区域的尺寸。假设我们设置了如下样式:

    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 10px solid;
      margin: 30px;
    }
    

    用图形来表示的话,就是这样:

    +----------------------------------------+
    | Margin (30px)                          |
    |  +----------------------------------+  |
    |  | Border (10px)                    |  |
    |  |  +----------------------------+  |  |
    |  |  | Padding (20px)             |  |  |
    |  |  |  +----------------------+  |  |  |
    |  |  |  | Content (200px)      |  |  |  |
    |  |  |  +----------------------+  |  |  |
    |  |  |                            |  |  |
    |  |  +----------------------------+  |  |
    |  |                                  |  |
    |  +----------------------------------+  |
    +----------------------------------------+
    

    从这个图中可以清晰地看到,计算元素的总宽度时,需要把内容宽度、左右padding、左右border以及左右margin都加起来,即总宽度 = 200 + 20×2 + 10×2 + 30×2 = 320px。

    (二)IE盒模型(border-box)

    IE盒模型(border-box)和标准盒模型有所不同,这里的widthheight表示的是内容、padding和border的总和。还是以上面的样式为例,用图形表示如下:

    +----------------------------------------+
    | Margin (30px)                          |
    |  +----------------------------------+  |
    |  | Border (10px) + Padding (20px)   |  |
    |  |  +----------------------------+  |  |
    |  |  | Content (实际: 140px)       |  |  |
    |  |  | (200 - 20*2 - 10*2 = 140)  |  |  |
    |  |  +----------------------------+  |  |
    |  |                                  |  |
    |  +----------------------------------+  |
    +----------------------------------------+
    

    在IE盒模型下,计算总宽度时,只需要把设置的width和左右margin相加就行,所以总宽度 = 200 + 30×2 = 260px ,这里内容的实际宽度则是通过设置的width减去左右padding和左右border得到的,即200 – 20×2 – 10×2 = 140px。

    二、DOM元素的宽高属性详解

    了解了盒模型之后,接下来看看与DOM元素宽高相关的几个属性。

    (一)offsetWidth / offsetHeight

    这个属性包含了内容的width/heightpadding以及border,但不包含margin。以之前设置的样式为例:

    • content-box盒模型下,offsetWidth的计算方式为:内容宽度 + 左右padding + 左右border,即200 + 20×2 + 10×2 = 260px。
    • border-box盒模型下,offsetWidth就等于设置的width,也就是200px。

    (二)clientWidth / clientHeight

    clientWidthclientHeight属性包含内容的width/heightpadding,但不包含bordermargin。同样以之前的样式为例:

    • content-box盒模型下,clientWidth = 内容宽度 + 左右padding,即200 + 20×2 = 240px。
    • border-box盒模型下,clientWidth = 设置的width – 左右border,即200 – 10×2 = 180px。

    (三)getBoundingClientRect

    getBoundingClientRect方法返回的widthheight等于 (内容 + padding + border) × transform缩放系数,并且这个宽高与盒模型的设置无关。它的主要作用是返回元素相对于视口的精确几何信息,返回值是一个DOMRect对象,包含8个属性:

    {
      x:       // 元素左上角X坐标(等同left)
      y:       // 元素左上角Y坐标(等同top)
      left:    // 元素左侧到视口左侧的距离
      top:     // 元素顶部到视口顶部的距离
      right:   // 元素右侧到视口左侧的距离
      bottom:  // 元素底部到视口顶部的距离
      width:   // 元素的实际渲染宽度(含transform)
      height:  // 元素的实际渲染高度(含transform)
    }
    
    1. 坐标系示意图:视口的左上角坐标为(0,0),X轴向右延伸,Y轴向下延伸。元素的左上角坐标为(left, top) ,并且满足rect.right === rect.left + rect.widthrect.bottom === rect.top + rect.height这样的关系。
    2. 性能注意事项:在使用getBoundingClientRect方法时,要注意性能问题。频繁调用这个方法会强制同步布局,导致性能下降。所以最好批量读取相关属性,例如:
    // (触发两次重排)
    const width = el.getBoundingClientRect().width;
    const height = el.getBoundingClientRect().height;
    
    // (单次重排)
    const rect = el.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;
    

    后面这种方式连续读取多个属性,只会触发一次重排,能有效提升性能。

    (四)scroll相关属性和方法

    1. scrollHeight & scrollWidthscrollHeight等于内容的实际高度加上paddingscrollWidth等于内容的实际宽度加上padding。比如下面这个例子:
    <div id=\"container\" style=\"height:200px; overflow-y:scroll\">
      <div style=\"height:800px; padding:20px\"></div>
    </div>
    <script>
      console.log(container.scrollHeight); // 800 + 20*2 = 840
      // 如果设置overflow-y:hidden,container.scrollHeight = 800 + 20 = 820
    </script>
    
    1. scrollTop & scrollLeftscrollTop表示元素内容向上滚动的距离,scrollLeft表示元素内容向左滚动的距离。判断元素是否滚动到底部,可以通过element.scrollTop >= scrollHeight - clientHeight这个式子来判断,同理,判断是否滚动到最右侧,可以用element.scrollLeft >= scrollWidth - clientWidth
    2. scrollTo方法:使用scrollTo方法可以实现平滑滚动效果,比如下面这样:
    // 原生平滑滚动
    element.scrollTo({
      top: 500,
      behavior:\'smooth\'
    });
    
    1. scrollTopMax / scrollLeftMax:目前只有火狐浏览器支持这两个属性。scrollTopMax表示最大可滚动距离,即scrollHeight - clientHeight,常用于检测元素是否滚动到底部;scrollLeftMax表示最大水平滚动距离,即scrollWidth - clientWidth,可用于横向滚动限制检测。兼容性方面,Chrome、Safari、Edge和IE都不支持这两个属性,只有Firefox 44及以上版本支持 。

    通过对DOM元素盒模型和各种宽高属性的详细介绍,希望大家能在前端开发中更准确地把握页面布局,避免因尺寸计算错误导致的显示问题。

    兼容性对照表

    属性/方法 Chrome Firefox Safari Edge IE
    scrollTopMax ✅ 44+

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6905.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号