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

在写实例理解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布局）