CSS之元素视图属性

最新推荐文章于 2023-09-20 21:58:55 发布
最新推荐文章于 2023-09-20 21:58:55 发布
阅读量437 收藏
点赞数
分类专栏： css

1.clientLeft和clientTop

返回的是内容区域的左上角相对于整个元素左上角的位置（包括边框）

这里写图片描述

这里写图片描述

2.clientWidth和clientHeight

表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条

这里写图片描述

这里写图片描述

3.offsetLeft和offsetTop

offsetLeft和offsetTop表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值

4.offsetParent

第一个祖定位元素（即用来计算上面的offsetLeft和offsetTop的元素）

offsetParent元素只可能是下面这几种情况：

  • <body>
  • position不是static的元素
  • body元素为定位元素的终极boss，所以其上头就没有其他定位元素了。也就是说body元素没有offsetParent

5. offsetWidth和offsetHeight

整个元素的尺寸（包括边框）

这里写图片描述

这里写图片描述

6.scrollLeft和scrollTop

scrollLeft和scrollTop表示元素滚动的像素大小。可读可写。这个玩意貌似我们用得比较多

7.scrollWidth和scrollHeight

表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollTop + clientHeight

tian361zyc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
domino xpages 开发 视图CSS说明
02-27
常见的 CSS 选择器有：元素选择器、类选择器、ID 选择器、属性选择器等。 例如，在上面的代码中，我们可以看到使用了类选择器 `.xspPrevious` 和 `.xspNext` 来选择相应的 HTML 元素，并应用相应的样式。 CSS 属性...
CSS知识点总结3
xsc2022的博客
03-17 551
一.转化，转变 transform: rotate | scale | skew | translate; 属性之间用空格隔开 注意：不是逗号“，” 二.移动 1、translate(<translation-value>[, <translation-value>]) 2、translateX(<translation-value>) 3、translateY(<translation-value...
CSS响应式设计——（视口/网格视图/媒体查询/图像/视频）看这一篇就够了
Vec_Kun的博客
02-02 1131
响应式 web 设计会让我们的网页在所有设备上运行良好。响应式 web 设计仅使用 HTML 和 CSS。响应式 web 设计并不是程序或 JavaScript。视口（viewport）是用户在网页上的可见区域。视口随设备而异，在移动电话上会比在计算机屏幕上更小。在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。
[学习记录][css]position
jhqdlove的专栏
06-17 602
position属性是指本体对上级的定位。有四个：static、absolute、relative、fixed 先放测试代码： position-absolute 样式为 .father{ background: red; width:50%;
【Hello CSS】第三章-浏览器的视图与坐标
鱼头的Web海洋
07-23 1033
作者：陈大鱼头 github： KRISACHAN 在上一篇【Hello CSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题： 为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？ 现在各位看官有答案了吗？ 因为上一篇中有提到过CSS 逻辑属性的变革，从物理概念跳跃到了逻辑概念，也就是从top...
【css】最全布局总结
qq_45406325的博客
08-13 7943
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
JS+CSS3角度页面视图导航
04-06
转换可以改变元素的位置、大小和形状，过渡用于平滑地改变一个或多个CSS属性，而动画则允许我们在时间线上定义一系列关键帧，创建动态效果。 JS在这套导航中起到了增强交互性的作用。JavaScript是一种客户端脚本...
JS+CSS3角度页面视图导航.zip
11-24
本资源“JS+CSS3角度页面视图导航”着重于利用这两者创建一个独特且引人入胜的页面导航系统。这个系统可能包含了3D视角效果，使用户能够以一种新的、更直观的方式浏览网站的层级结构。 首先，我们来深入了解一下CSS...
纯css3制作Word文本编辑器效果
11-02
1. **选择器增强**：CSS3引入了更强大的选择器，如属性选择器、伪类和伪元素，这使得我们可以更精确地定位和风格化元素，比如模拟Word中的高亮文本或选中状态。 2. **边框与背景**：CSS3允许我们设置圆角边框、渐变...
CSS-CSS属性速查表
11-06
`bgColor`属性则用于设置或获取元素的背景颜色，虽然后者在现代CSS中已被废弃，但了解其历史用途仍有价值。 #### bgProperties `bgProperties`属性用于设置或获取背景图片的属性，包括位置、重复模式等，是CSS背景...
CSS transform 属性(1+X Web前端开发初级 例题)
黛琳ghz的博客，期待你的关注。
03-28 1966
CSS transform 属性(1+X Web前端开发 例题)
CSS 响应式设计：网格视图
最新发布
梁辰兴的博客
09-20 168
CSS响应式设计中的网格视图是一种用于创建网页布局的方法，它可以帮助我们实现网页在不同设备和屏幕尺寸下的适应性布局。在CSS中，我们可以使用网格视图来将网页分成多个列和行，然后根据不同设备的屏幕尺寸和分辨率来定义每个列和行的宽度和高度。通常，我们可以将网格视图的父元素设为一个具有列数和行数的容器，然后将其子元素分别定义为不同的列和行。在构建响应式网格视图时，我们可以使用CSS中的媒体查询来根据不同设备的屏幕尺寸和分辨率来定义每个列和行的宽度和高度。
CSS（1）的三种样式
flower521528的博客
03-01 163
介绍： 今天开始更新前端中的css（层叠样式表），如果说HTML是网页框架的话，那么css就是网页的装扮，主要对网页进行修饰；为网页提供了丰富的格式化功能；css呢也是我们学习前端重要的一章，希望今后的日子能够和大家继续一起学习前端。 1.行内样式 直接在标签内部进行操作，定义的属性用分号隔开，长度和宽度的定义一定要加px； style="color：；width：" 实例 <div style="color:red ;...
CSS之Screen视图属性
tian361zyc的博客
06-07 1431
CSS
CSS3 perspective 属性（3D 元素距视图的距离）
web前端基础知识
03-03 1592
浏览器支持 目前浏览器都不支持 perspective 属性。 Chrome 和 Safari 支持替代的 -webkit-perspective 属性。   定义和用法 perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。...
css 视图结构
weixin_33748818的博客
01-17 125
css 视图结构 css2.0盒模型层次平面示意图和3D示意图 DIV结构解析 转载于:https://www.cnblogs.com/huangxiang/archive/2012/01/17/2324678.html
元素视图属性
RENYZHI的博客
01-02 408
为了方便我们班的学生来看，所以我想着不如直接发在网上，以后还可以继续看，可以进行二次完善，有不足的地方，希望大家可以一起来改正。 我将从以下的几个点来进行讲解： 1.clientWidth和clientHeight 2.clientLeft和clientTop 3.offsetWidth和offsetHeight 4.offsetTop和offsetLeft 5.scrollWidth和
深入理解元素视图的3个方法
weixin_34128501的博客
09-02 75
前面的话 　　前面介绍了offset偏移、client客户区和scroll滚动，这三部分主要从属性的角度来对元素尺寸信息进行获取和修改。本文主要介绍元素视图的三个方法，包括getBoundingClientRect()、getClientRects()和elementFromPoint()   getBoundingClientRect() 　　判断一个元素的尺寸和位置最简单的方法就是使用...
使用CSS3实现酷炫的3D旋转视图
zz_jesse的博客
07-06 1845
3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优...
CSS position属性详解：布局与定位控制
CSS的`position`属性是网页布局和设计中不可或缺的一部分，它控制着元素在页面上的定位方式。这个属性主要有四个值：`static`, `relative`, `absolute`, 和 `fixed`，其中`static`是默认值，表示元素按照文档流自然...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值