android垂直排列元素_元素的视图属性之client
总结:
- clientLeft = border-left
- 如果有滚动条,clientLeft = border-left+ 滚动条宽度
- clientWidth = content-width(内容实占宽度,如果有滚动条,则不应计算在内)+padding
clientLeft和clientTop
1.
clientLeft
表示内容区域的左上角相对于整个元素左上角的位置(不包括padding、margin),也就是一个元素的左边框(border-left)的宽度。
2. 特别的:如果元素的文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条的宽度。
3. clientTop的计算方法和clientLeft相似。
clientWidth和clientHeight
Element.clientWidth
属性表示元素的内部宽度,以像素计。该属性包括内边距(padding),但不包括垂直滚动条(如果有)、边框(border)和外边距(margin)。该属性值会被四舍五入为一个整数。如果你需要一个小数值,可使用element.getBoundingClientRect()
。
![](/assets/blank.gif)
实验 [clientLeft
+ clientWidth
]
<body><div class="parent"> <div class="child">我们我们我们</div></div>
</body>
*{margin:0;padding:0;
}
.parent{border:2px solid red;width:100px;height:100px;padding:10px;position:relative;
}
.child{position:absolute;width:50px;height:50px;top:10px;left:20px;border:6px solid green;margin:1px;
}
let p = document.createElement('p')
window.console.log = (content)=>{p.innerHTML += content + '<br>'
}
document.body.append(p)
let child = document.querySelector('.child')
console.log('child.clientTop = ' + child.clientTop)
console.log('child.clientLeft = '+ child.clientLeft)
console.log('child.clientWidth = ' + child.clientWidth)
![](/assets/blank.gif)
1. clientWidth
这时div.child
的width
设置为50像素,没有padding
值,所以clientWidth
的值为50。如果这时添加padding
呢?
padding:2px;
![](/assets/blank.gif)
这时候50像素的内容宽度加上左右两像素的padding
,clientWidth
就变成54了。如果说有垂直方向上的滚动条呢?
overflow-y:scroll;
![](/assets/blank.gif)
37怎么来的呢?来看看div.child
的盒子模型
![](/assets/blank.gif)
这时div.child
的内容宽度为33,再加上左右padding
值,就等于37.这就是clientWidth
不包含垂直滚动条的意思。
2. clientLeft
可以看到clientLeft
的值为6,这也就是border的值。 如果说div.child
的排列方向为从右到左,并且存在垂直滚动条呢?
direction:rtl; overflow-y:scroll;
来看看这时打印的结果。
![](/assets/blank.gif)
这时clientLeft
的值为23像素。本来border
的值为6,那么剩下的17像素是什么呢?应该就是滚动条的宽度了。如果猜想没有,此时内容区域的宽度应该只有 50 - 17 = 33
。来看看div.child
的盒子模型。
![](/assets/blank.gif)
猜想正确,得到验证。果然此时div.child
的内容去宽度只有33像素了。因为其他的17像素被滚动条占据了。
android垂直排列元素_元素的视图属性之client相关推荐
- android垂直排列元素_Android弹性布局(FlexboxLayout)
Flexbox简介 flexbox是属于CSS的一种布局方案,可以简单.完整.响应式的实现各种页面布局.谷歌将其引入以提高复杂布局的能力. 源码传送门 Flexbox的布局和相关名称 上图模型中包含以 ...
- android 垂直的开关_安卓布局:如何让这两个按钮水平垂直居中
代码: 代码: android:id="@+id/linearLayout1" android:layout_width="wrap_content" andr ...
- App控件定位:Android 控件介绍及元素定位方法
本文将分享Android相关基础知识和Android APP控件定位工具的使用方法. 目录 Android基础知识 Android布局 Android四大组件 1.activity 2.Service ...
- HTML05——行内块级元素_文档流_font属性_盒子模型_练习
目录 行内块级元素 文档流 font属性 文本段落 文字属性 盒子模型 概念和属性 常见问题 块元素和行元素的相互转换 display属性 overflow属性 边框.宽度与高度 浮动float 练习 ...
- css变成块级元素_【CSS】块级元素
完整的框模型(Box Model) 不同的宽度.高度.内边距和外边距相结合,就可以确定文档的布局. 大多数情况下,文档的高度和宽度由浏览器基于可用的显示区域和其他一些因素自动确定. 1.元素框的最内部 ...
- 列表删除前面两个元素_第015篇:List列表 - 课程二
列表的修改. 可以看到,我只做了一个操作,就是buy[3] = '红薯'.我给出了前后对比,前面从0数位置3是生菜,我修改后该元素变更为红薯. 当然也可以一次修改多个元素. 上面程序buy[1:3] ...
- css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
- CSS_伪元素_伪类
版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/twilight_karl/article/details/55804090 伪类 link 未访问的链接 ...
- set集合判断集合中是否有无元素_集合 (Set) | 一山不容二虎的 Python 数据类型
点击上方"可乐python说"关注公众号,点击右上角 "..."选择"设为星标"第一时间获取最新分享! 前言 Hi,大家好,我是可乐, 今天 ...
最新文章
- Android中asset文件夹和raw文件夹区别
- 使界面里的组件更圆滑
- Apache Flink 零基础入门(二):使用docker快速搭建Flink
- eclipse配置maven + 创建maven项目
- Gartner发布2021年数字商务技术成熟度曲线,重点关注四项技术
- [ python ] 基础技巧
- 深度解读最流行的优化算法:梯度下降
- python编程从入门到实践第八章_Python编程从入门到实践的第三天
- 界面为ScrollView时打开界面会自动滚动到底部之解决方法
- thymeltesys-基于Spring Boot Oauth2的扫码登录框架
- side-by-side
- Visual Studio Tip 之 如何查看隐形的空格(white space)和制表符(tab)
- Google中国要来啦
- popwindow的显示层面
- ubuntu google earth 乱码 自动关闭
- Mac中如何卸载pkg包
- 杭州电子科技大学计算机复试内容,2018年杭州电子科技大学考研复试录取办法...
- html中怎么隐藏一些符号,html 的一些特殊符号
- 仿牛客社区项目3.2——发布帖子(异步通信技术AJAX)
- Google 回归中国,你准备好成为 Googler 了吗?
热门文章
- java连接mongo_java 连接mongodb
- 大数据可视化平台优点在哪
- 大数据分析的特点有哪些
- 四川地震,物联网地震预警系统立功了
- java 多项式拟合最多的项数_MATLAB绘制带置信区间的拟合曲线
- python代码文件方式_关于.py文件的详细介绍
- 字节跳动正式offer之前是哪一个环节_不是做梦!她在3天前拿到腾讯、百度、字节跳动的offer!...
- linux点阵数字图案,LED8X8点阵显示数字0-9数字
- HBase完全分布式搭建
- R︱Softmax Regression建模 (MNIST 手写体识别和文档多分类应用)