文章详情页

css - 关于offsetLeft和offsetTop

浏览：257日期：2023-01-15 09:22:10

问题描述

offsetLeft不是当前元素的左外边框到包含元素的左内边框之间的像素距离吗？为什么多出了8px

<!DOCTYPE html><html> <head><meta charset='utf-8'><title>test2</title><style media='screen'> .cc{padding: 50px 30px; } .fc{background-color: blue;width:300px;height: 200px; }</style> </head> <body><p class='cc'> <p > </p></p> </body> <script type='text/javascript'>var fc = document.querySelector(’.fc’);console.log(fc.offsetLeft+’:’+fc.offsetTop); </script></html>

问题解答

回答1：

offsetLeft 和 offsetTop 返回的是相对于 offsetParent 元素的距离，而 offsetParent 指的是一个元素最近的父级定位元素，如果没有定位元素就是文档根节点。

你现在输出的值加上 body 本身有 8px 的 margin，其实是没错的。你可以加个 body { margin:0 } 或者给父级元素加上定位，输出就是你期望的数了。

回答2：

默认有8px的margin。使用*{margin:0;}清除默认样式。

CSS

上一条：html5 - 使用canvas的fillText方法写文字时，坐标的问题。下一条：html5 - 为什么svg中的矩形绘制边框的时候，底边框不显示？

相关文章：

1. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）2. $fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题3. 求一个mySQL安装包4. javascript - mysql插入数据时怎样避免与库中的数据重复？5. mysql数据库做关联一般用id还是用户名6. MySQL中的enum类型有什么优点？7. MySQL 这句创建表结构语句的错误在哪？8. node.js - 我想让最后进入数据库的数据，在前台最先展示，如何做到？9. 数据库设计 - MySQL数据库主键问题10. MySQL能否给某个字段的值设置有效期？

排行榜

					
					$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题
python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）
angular.js - 全站用的angular，但是像下面描述的这样强交互的功能用angular该用什么思路去做呢？
angular.js - 关于angular RouteProvider
android-studio - Android 作用域传递问题？
android - MVP模式 包的结构
angular.js - 为什么Angular2和Ionic2都用TypeScript开发，TypeScript有什么优势吗？
angular.js - angularjs的自定义过滤器如何给文字加颜色？
angular.js - 用angular2-cli打包项目之后，跳转路由刷新会报404的错误
Android TextView 或 ListView 加载过渡效果
android-studio - Android studio中的这个框如何用快捷键打开?
				

热门标签