几个left,top的解释

最新推荐文章于 2022-01-14 14:01:33 发布
原创 最新推荐文章于 2022-01-14 14:01:33 发布 · 499 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了HTML元素的定位属性如clientLeft、clientTop、style.left等，以及可滚动元素的scrollLeft、scrollTop属性。解释了各属性的含义及应用场景。
1.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素,他的值就是0.


2.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.

4.style.left:
定位元素与包含它的矩形左边界的偏移量

5.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.

6.style.posLeft:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em
面试超爱问的TopK问题，这篇彻底搞明白
bigsai
12-16 4889
文章首发公众号：bigsai 首发博客csdn 收录在github算法仓库 前言 hello，大家好，我是bigsai哥哥，好久不见，甚是想念哇????！ 今天给大家分享一个TOPK问题，不过我这里不考虑特别大分布式的解决方案，普通的一道算法题。 首先搞清楚，什么是topK问题？ topK问题，就是找出序列中前k大(或小)的数，topK问题和第K大(或小)的解题思路其实大致一致的。 TopK问题是一个非常经典的问题，在笔试和面试中出现的频率都非常非常高(从不说假话)。下面，从小小白的出发点,认为to
SqlServer多表LEFT JOIN关联查询之根据日期时间查最后一次数据的几种sql语句
G007N的专栏
06-14 1714
SqlServer多表LEFT JOIN关联查询之根据日期时间查最后一次数据的几种sql语句。本示例是：查询药品最后一次采购的供应商和采购日期时间。
java topleft_jQuery / CSS - 使用left / top重新定位相对DIV
weixin_31580797的博客
02-16 211
我有一个属性为“Position：relative;”的DIV . 现在，这些DIV中有三个 . 他们都获得了一个独特的ID等 .现在，如果我单击DIV，我希望它能够动画到文档中的某个位置 . 虽然我无法确定左/上值，因为如果我使用“top”和“left”，它会相对地将左侧设置为其父项位置 .也许有点不清楚，但这是我得到的 .将移动的可点击DIV的CSS .div#left_hldr .switc...
CSS3：Left 和 Top 的使用
ShangQuan2012的博客
03-22 1897
记录：left和top的使用必须伴随设置 position ： relative或者absolute；css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为bod
框选位置（一个、多个）
看陌生的风景的博客
09-26 290
// 框选一个 // data(左上角坐标：leftTopX，leftTopY 右下角坐标：rightBottomX，rightBottomY ) function drawLine(data) { var image = new Image(); //原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响） if ($("#carS...
matlab里面的命令lefttop,总结css中常见的四个定位属性（left right top bottom）
weixin_29831325的博客
03-18 1179
DIV CSS left right top bottom定位这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative。Left 当前元素的左侧与父元素左侧(就是原来默认位置)的距离值。Right 当前元素的右侧与父元素右侧的距离值。Top 当前对象顶部距离原位置顶部距离多少。Bottom 当前对象底部距离原位置距离多少...
算法设计 L型组件填图问题
oowadanoko的博客
01-14 1021
算法设计 L型组件填图问题 1. 问题描述 设B是一个n×n棋盘，n=2k,(k=1,2,3,…)。用分治法设计一个算法，使得：用若干个L型条块可以覆盖住B的除一个特殊方格外的所有方格。其中，一个L型条块可以覆盖3个方格。且任意两个L型条块不能重叠覆盖棋盘。 例如：如果n=2，则存在4个方格，其中，除一个方格外，其余3个方格可被一L型条块覆盖；当n=4时，则存在16个方格，其中，除一个方格外，其余15个方格被5个L型条块覆盖。 2. 具体要求 输入一个正整数n，表示棋盘的大小是nn的。输出一个被L型条块覆盖
jquery计算出left和top,让一个div水平垂直居中的简单实例
10-21
首先，我们需要了解几个基本概念： 1. `div`：在HTML中，`<div>`元素是一个通用容器，用于组织其他元素，可以设置样式使其在页面上占据特定位置。 2. `position`：CSS中的`position`属性用于定义元素的定位类型，...
Android学习笔记之屏幕宽高、状态栏宽高、标题宽高以及left()、top()、right()、bottom()
GodV的博客
09-24 4038
Android学习笔记之屏幕宽高、状态栏宽高、标题宽高以及left()、top()、right()、bottom()前言：　　想学号安卓，这几个方法及属性你不得不学会怎么获取，当你学会了如何获取屏幕宽高、状态栏宽高、标题栏宽高以及子控件与父控件的left()、top()、right()、bottom()等，这会对你学习自定义控件会有很大的帮助，我之前做自定义的时候有时候也很难弄清他们之间的区别，今天
vue里实现拖拽功能 拖动一个元素来获取left值
like_you_aha的博客
08-04 1115
vue里实现拖拽功能 项目需求 拖动一个元素来获取left值 先上代码 <span class="burstPoint-img" v-drag> <i class="iconfont icon-shihuomiao"></i> </span> directives: { drag(el, binding, vnode) { let dragBox = el; // vnode.context 是整个vue实例 相当于this
旋转打印矩阵、旋转存储矩阵、之字形打印矩阵
五月花
12-04 2246
题目：输入一个矩阵，按照从外向里以顺时针顺序依次打印出每一个数字。例如：如果输入如下矩阵： 1      2    3     4 5      6    7     8 9    10  11  12 13  14  15  16 有三问： 1）如何实现转圈打印矩阵？  2）如何实现顺时针旋转矩阵？ 3）如何实现“之”字形打印矩阵？
position定位不设置left top 等值，以及position定位的百分比取值
JiM-W 的博客
01-09 1万+
子元素position 定位 百分比问题 基准 父元素是否定位
CSS中top和left的使用场景
TSeven37的博客
07-24 3023
left和top的使用必须设置 ； position：relative； || position：absolute css的left和top属性： 指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative。如果父级属性未设置po...
关于控件的Left 、Top、Width和Height属性
http://blog.youkuaiyun.com/lovesummerforever
08-01 7645
Private Sub MDIForm_Load() '从注册表中取得上次关闭MDIForm时的大小 Me.Left = WiGetSetting(App.Title, "Settings", "MainLeft", 1000) Me.Top = G
pygame中Rect(left, top, width, height)的参数详解
热门推荐
小飞的博客
06-17 5万+
今天终于把一个问题弄明白了，那就是pygame.Rect(left, top, width, height)中参数的问题。当遇到问题后，我上网上找了大量的资料，但是并没有详细的答案，于是开始思考最终得到答案：先上概念： pygame是一个设计用来开发游戏的python模块，Pygame 通过 Rect 对象存储和操作矩形区域。一个 Rect 对象可以由 left，top...
js获取left值的方法
兔子学前端
11-09 6749
在用js做动态效果时，通常需要获取元素绝对定位中的left和top属性值。比如做一个碰撞广告，就要不停的获取元素的top和left属性值。 需要注意的事：取值的元素必须要设置position:absolute绝对定位属性，才能取的到left值。 第一种方法，比较简单，就是直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内
一篇文章带你搞定 Pygame 中 RECT类(get_rect中的 left,right,top,bottom)解释
南淮北安的博客
08-11 1万+
先附上示例： import pygame import sys pygame.init() size = width,height = 600,400 bg = (255,255,255) screen = pygame.display.set_mode(size) pygame.display.set_caption("初次见面，请大家多多关照") chicken = pygame.image...
FireFox下设置DIV的top和left无效解决方法
mr_tanglin的专栏
12-31 3349
兼容火狐和IE的获取event对象、获取滚动条滚动参数，鼠标滑过，根据鼠标坐标显示层
矩形检测碰撞算法
liwy_finder的博客
06-23 532
[code="java"] /** * 矩形检测碰撞(标准平面坐标) * @param aLeftTopX 左上角x坐标值 -- 矩形1 * @param aLeftTopY 左上角y坐杯值 * @param aRightBottomX 右下角x坐标值 * @param aRightBottomY 右...
unity 设置RectTransform left top right bottom
最新发布
09-04
<think> 根据用户的问题，用户希望了解在Unity中如何设置RectTransform的left、top、right、bottom属性。结合提供的引用内容，我们可以总结出以下几种方法： 1. **使用offsetMin和offsetMax属性**（引用[1][2][3][5]）： - `offsetMin` 对应于左下角的偏移（Left和Bottom），类型为Vector2，其中x表示Left，y表示Bottom。 - `offsetMax` 对应于右上角的偏移（Right和Top），类型为Vector2，其中x表示Right（注意：实际存储的是负值，即编辑器中显示的Right值取负），y表示Top（注意：实际存储的是负值，即编辑器中显示的Top值取负）。 - 示例代码： ```csharp // 设置Left=10, Bottom=20, Right=30, Top=40 RectTransform rect = GetComponent<RectTransform>(); rect.offsetMin = new Vector2(10, 20); // Left, Bottom rect.offsetMax = new Vector2(-30, -40); // 注意：Right和Top要取负 ``` 注意：在编辑器中，我们看到的Right和Top是正数，但在代码中，`offsetMax`的x和y分别表示右边界和上边界相对于锚点的偏移，且为负值。这是因为Unity内部使用左下角为原点，向右和向上为正方向，而Right和Top的值实际上是表示从右边和上边向内收缩的距离（所以用负值表示）。 2. **使用SetInsetAndSizeFromParentEdge方法**（引用[4]）： - 这个方法允许你指定父物体的哪条边（Left, Right, Top, Bottom）作为基准，然后设置距离这条边的距离以及自身的宽度或高度。 - 需要分别设置水平方向（左和右）和垂直方向（上和下）。 - 示例代码（设置一个距离左边100，距离右边200，距离下边50，距离上边150的矩形）： ```csharp RectTransform rect = GetComponent<RectTransform>(); // 设置左边：距离父物体左边100，宽度为父物体宽度减去100（左边距）再减去200（右边距）？这里需要注意，通常我们设置左边和右边来确定宽度，设置底边和顶边来确定高度。 rect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, 100, rect.rect.width); // 这里第三个参数是宽度，但需要计算 rect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 200, rect.rect.width); // 这样设置并不正确，因为这两个设置会冲突 // 正确做法：通常需要结合两个边来设置位置和大小 // 设置左边和右边 rect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, 100, Screen.width - 300); // 左边距离100，宽度为父物体宽度减去300（100+200） rect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 50, Screen.height - 200); // 底边距离50，高度为父物体高度减去200（50+150） ``` 注意：这种方法通常用于锚点已经设置为某一边的情况，并且需要自己计算宽度和高度。 3. **注意点**： - 在使用`offsetMin`和`offsetMax`时，一定要记住：`offsetMax`的x和y分别是Right和Top的负值。例如，编辑器中Right显示为10，那么在代码中`offsetMax.x`应该是-10。 - 另外，设置这些属性时，需要确保RectTransform的锚点（Anchor）设置正确。例如，如果锚点设置为拉伸（stretch），那么设置offsetMin和offsetMax会直接影响四个边的位置。 **推荐方法**： 对于大多数情况，特别是当锚点设置为拉伸（stretch）时，使用`offsetMin`和`offsetMax`是最直接的方法。但要注意数值的正负关系。 **示例代码**（设置一个矩形距离父物体左边100，右边200，顶边300，底边400）： ```csharp RectTransform rect = GetComponent<RectTransform>(); rect.offsetMin = new Vector2(100, 400); // Left, Bottom rect.offsetMax = new Vector2(-200, -300); // Right, Top (注意负号) ``` 这样，矩形的左边距离父物体左边100，右边距离父物体右边200，底边距离父物体底边400，顶边距离父物体顶边300。 **注意事项**： - 在设置这些值之前，请确保锚点（anchorMin和anchorMax）已经设置为拉伸（stretch）模式，即`anchorMin`为(0,0)，`anchorMax`为(1,1)。这样设置offsetMin和offsetMax才会直接对应到四个边距。 - 如果锚点不是拉伸模式，那么这些值的影响会不同。 如果用户需要动态改变UI元素的边距，推荐使用offsetMin和offsetMax，因为它简洁明了。 §§相关问题§§ 1. 在Unity中，RectTransform的锚点设置对offsetMin和offsetMax有什么影响？ 2. 如何通过代码设置RectTransform的锚点（anchorMin和anchorMax）？ 3. 除了offsetMin/offsetMax和SetInsetAndSizeFromParentEdge，还有哪些方法可以控制RectTransform的位置和大小？ </think> 在Unity中动态设置RectTransform的left/top/right/bottom属性，主要有两种核心方法： ### 方法一：使用offsetMin和offsetMax属性（推荐） ```csharp // 获取RectTransform组件 RectTransform rect = GetComponent<RectTransform>(); // 设置Left和Bottom rect.offsetMin = new Vector2(left, bottom); // 设置Right和Top（需取负值） rect.offsetMax = new Vector2(-right, -top); ``` - **物理意义**: - `offsetMin`：左下角相对于锚点的偏移 (`Vector2(left, bottom)`) - `offsetMax`：右上角相对于锚点的偏移 (`Vector2(-right, -top)`) *注意：编辑器中的正值在代码中需转为负值*[^1][^2][^3][^5] ### 方法二：使用SetInsetAndSizeFromParentEdge方法 ```csharp // 设置左边距和宽度 rect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Left, left, width); // 设置顶边距和高度 rect.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Top, top, height); ``` *需配合设置Right/Bottom或动态计算尺寸*[^4] ### 完整示例（设置四边边距） ```csharp public void SetPadding(float left, float top, float right, float bottom) { RectTransform rect = GetComponent<RectTransform>(); // 方法一：offsetMin/Max rect.offsetMin = new Vector2(left, bottom); // Left, Bottom rect.offsetMax = new Vector2(-right, -top); // Right, Top (取负) } ``` ### 关键注意事项 1. **锚点要求**：两种方法都要求锚点设为拉伸模式（Anchor Min=(0,0), Max=(1,1)） 2. **数值关系**： - `实际宽度 = 父物体宽度 - (left + right)` - `实际高度 = 父物体高度 - (top + bottom)` 3. **值域特性**：`offsetMax`的x/y值对应编辑器中Right/Top值的负数[^5] 4. **性能优化**：避免在Update中频繁设置，必要时使用LayoutRebuilder > 示例场景：当需要实现自适应弹窗内边距时，方法一更简洁高效[^3]。全屏切换功能中通过动态修改四边值可实现平滑过渡[^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值