关于scroll,client,innear,avail,offset等的理解

neu 发布于2019-08-30 15:54 / 2706人阅读

摘要：在写实例理解，，，及等的时候，意外的又发现了值合并的问题，在这里同时记录下偏移量的区别文件自己写的示例样式较多见的属性指可见区的宽度网页，或者元素指可见区的高度网页，或者元素指元素的宽度网页，或者元素指元素的高度网页，或者元素滚动条的

在写实例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的时候，意外的又发现了margin值合并的问题，在这里同时记录下

1.偏移量的区别

html文件（自己写的示例）

css样式

较多见的属性

clientWidth: 指可见区的宽度（网页，或者元素）
clientHeight: 指可见区的高度（网页，或者元素）
offsetWidth: 指元素的宽度（网页，或者元素）
offsetHeight: 指元素的高度（网页，或者元素）
scrollTop: 滚动条的滚动距离
scrollLeft: 滚动条的滚动距离
availWidth: 屏幕可用区宽度
availHeight: 屏幕可用区高度

script

下面这个的话是我百度找的图片

这个图我感觉有点复杂的样子，

2.margin值合并的问题

当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者

还有一种就是：当父元素没有设置内边距或边框,以及触发BFC时,如果子元素的值大于父元素时，它会带着父元素一起偏移,此时子元素是相对除了它父级之外的离它最近的元素偏移的

解决方法的话，可以改变两者的margin值，或者对元素设置border、padding，或者形成BFC

3.关于BFC(块格式化上下文)

内部的box会在垂直方向，一个接一个的放置

Box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠

每个元素的margin box 的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此

Bfc的区域不会与float box重叠

Bfc就是页面上的一个隔离的独立的容器，容器里面的元素不会影响到外面的元素，反之也是如此

计算bfc的高度时，浮动元素也会参与计算

4.形成bfc的条件

浮动元素，float除none外的值

绝对定位元素，position（absolute，flxed）

display：inline-block，table-cells，table-captions

overflow除了visible以外的值

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

判断ios和Android及PC端

webpack打包（有面试题）

纯css实现瀑布流（multi-column多列及flex布局）

私有云专线服务 innear avail Availability Available

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117022.html

关于scroll,client,innear,avail,offset等的理解

摘要：在写实例理解，，，及等的时候，意外的又发现了值合并的问题，在这里同时记录下偏移量的区别文件自己写的示例样式较多见的属性指可见区的宽度网页，或者元素指可见区的高度网页，或者元素指元素的宽度网页，或者元素指元素的高度网页，或者元素滚动条的在写实例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的时候，意外的又发现了...

Yangder 2019-08-02 11:38 评论0 收藏0
JS 中的offset、scroll、client总结

摘要：两张图镇楼，随时翻阅指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条，不包括隐藏的部分属性返回一个对象的引用，这个对象是距离调用的父级元素中最近的在包含层次中最靠近的，并且是已进行过定位的容器元素。经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。两张图镇楼，随时翻阅 showImg(https://segmentfault.c...

The question 2019-08-23 10:54 评论0 收藏0
JS 中的offset、scroll、client总结

摘要：两张图镇楼，随时翻阅指偏移，包括这个元素在文档中占用的所有显示宽度，包括滚动条，不包括隐藏的部分属性返回一个对象的引用，这个对象是距离调用的父级元素中最近的在包含层次中最靠近的，并且是已进行过定位的容器元素。经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。两张图镇楼，随时翻阅 showImg(https://segmentfault.c...

jerryloveemily 2019-08-02 11:13 评论0 收藏0
kde5与archlinux环境下配置libinput-gestures多手势操作

摘要：笔者在配置好自己的手势后，机缘巧合用了一个星期的，体会了苹果下面的手势操作。总体感觉苹果的手势操作更流畅，识别更准确。毕竟苹果是自己的生态系统，可以针对自己的系统进行封装和调试。相关参考原文链接优化触摸板配置初衷自己的笔记本是archlinux+kde plasma5的环境，看到同事的macbook pro支持很多手势操作（gestures），自己也希望在archlinux和kde...

Raaabbit 2019-06-21 14:37 评论0 收藏0
JS宽高（client、offset、scroll）的介绍

摘要：问题今日头条的一道笔试题，的区别。结果如图更详细的介绍，请点击问题今日头条的一道笔试题，offsetWidth、clientWidth、scrollWidth的区别。分析 JS中document对象的宽高有三种，cilent、offset、scroll client： clientWidth和clientHeight，clientTop和clientLeft clientWidt...

mj 2019-08-20 18:21 评论0 收藏0