讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

JavaScript 盒模型 尺寸深入理解_基础知识

php中文网
发布： 2016-05-16 17:44:50
原创
1215人浏览过

概念

引自维基百科：根据由万维网联盟（W3C）于1996年发行并于1999年修订的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身(内容区)的宽度或高度，而padding, border和margin随后被应用。Internet Explorer在“怪异模式” 则把内容，内边距（padding）和边框（border）全部包括在一个指定的宽度或高度之内；这导致它呈现出一个比遵从标准行为的结果更窄或者更短的盒子。如下图：

299px-W3C_and_Internet_Explorer_box_models.svg

应用

理解盒模型，不管是对于设置一个元素外边据、边框、内边距，高宽CSS样式的准确应用，还是对于使用JavaScript去计算盒子的宽度、高度都有很大的帮助。比方说jQuery中提供的outerWidth，innerWidth，width，有了上面那个图，随时都可以很清楚的了解这个值的准确信息，在计算一个元素的位置和尺寸时都很有用处。

在弹出层中的应用，动态调整弹出层尺寸，以及拖拽过程中计算最大范围边距时都有用到。

零一万物开放平台
零一万物开放平台

零一万物大模型开放平台

零一万物开放平台 48
查看详情 零一万物开放平台

一张图理解：

jquery-box-size

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：Javascript 判断是否存在函数的方法_javascript技巧 下一篇：jQuery插件-jRating评分插件源码分析及使用方法_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
javascript如何实现浏览器指纹识别_有哪些常用技术？ 浏览器指纹识别通过组合Canvas、WebGL、navigator属性、时区和屏幕信息等5–7个稳定字段哈希生成，非隐私模式下识别率超90%，但需遵守GDPR/CCPA合规要求。
2025-12-23 17:12:09
177
javascript的柯里化是什么_它如何实现函数转换？ 柯里化是将多参数函数转换为单参数函数链的过程，通过闭包保存已传参数，待参数数量满足时执行原函数；其核心是延迟求值与部分参数固定，区别于可多参数传入的偏函数。
2025-12-23 17:10:02
234
javascript如何实现截图功能_怎样将网页保存为图片？ JavaScript无法直接调用系统截图API，但可通过html2canvas或dom-to-image库将DOM渲染为图片，或借助Puppeteer等服务端工具实现高质量截图。
2025-12-23 17:07:02
693
javascript的Babel是什么_如何转换新版本代码？ Babel是将新标准JavaScript代码（如ES2015+、TypeScript、JSX）转换为向后兼容版本（如ES5）的编译器，通过解析→转换→生成三步基于AST实现精准降级，解决浏览器环境对新语法支持滞后的问题。
2025-12-23 16:49:17
434
javascript JSON是什么_如何解析和序列化JSON数据 JSON是字符串而非对象，需用JSON.parse()解析、JSON.stringify()生成；键名必须双引号，不支持单引号、undefined、函数等；格式错误会直接报错。
2025-12-23 16:48:43
452
javascript怎样操作蓝牙设备？_javascript的Web Bluetooth API如何使用？ WebBluetoothAPI允许HTTPS或localhost环境下通过用户交互调用requestDevice()、connect()、getPrimaryService()、readValue()等异步方法与BLE设备通信，Chrome/Edge/Opera支持，Safari/Firefox不支持。
2025-12-23 16:46:15
693
javascript如何实现自动化测试_怎样用Selenium控制浏览器 最常用方式是结合SeleniumWebDriver与Node.js生态，或更推荐Playwright；Playwright开箱即用、多浏览器支持、自动等待；Selenium需手动管理驱动；定位优先用data-testid，避免固定等待，测试应独立可重复。
2025-12-23 16:45:18
436
javascript如何实现代码格式化_工具如Prettier如何配置？ Prettier是主流JavaScript代码格式化工具，开箱即用且支持精细配置；推荐项目本地安装，通过配置文件（如.prettierrc.js）或命令行统一风格，并与ESLint协同实现质量与格式双修复。
2025-12-23 16:37:02
542
javascript如何操作蓝牙_Web Bluetooth API有哪些实际应用场景？ JavaScript可通过WebBluetoothAPI在支持浏览器中直接连接BLE设备，适用于工业传感、医疗监测、教育开发及门禁验证等场景，需HTTPS、用户触发、设备广播指定服务且仅限Chrome/Edge支持。
2025-12-23 16:23:02
163
javascript的模块化是什么_如何使用import和export？ JavaScript模块化通过export和import实现代码拆分与依赖管理，支持命名导出、默认导出及混合导入，需注意顶层导入、路径规范、环境配置（如type="module"）及常见误区。
2025-12-23 16:21:30
440
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部