共计 4525 个字符，预计需要花费 12 分钟才能阅读完成。
在写实例理解 scrollWidth，clientWidth，innearWidth，availWidth 及 offsetWidth 等的时候，意外的又发现了 margin 值合并的问题，在这里同时记录下
1. 偏移量的区别
html 文件（自己写的示例）
<div id=”root”>
<div class=”box”>
<div class=”content”></div>
</div>
</div>
css 样式
<style>
body, html{
padding: 0;
margin: 0;
}
#root{
/*position: relative;*/
margin: 0 auto;
width: 1200px;
/*border: 1px solid black;*/
}
.box{
overflow: scroll;
margin: 5px;
padding: 20px;
width: 500px;
height: 600px;
border: 2px solid blueviolet;
/*box-sizing: border-box;*/
background: linear-gradient(to right, rgb(85, 181, 255), rgb(207, 224, 232));
}
.content{
width: 530px;
height: 600px;
}
</style>
较多见的属性
clientWidth: 指可见区的宽度（网页，或者元素）
clientHeight: 指可见区的高度（网页，或者元素）
offsetWidth: 指元素的宽度（网页，或者元素）
offsetHeight: 指元素的高度（网页，或者元素）
scrollTop: 滚动条的滚动距离
scrollLeft: 滚动条的滚动距离
availWidth: 屏幕可用区宽度
availHeight: 屏幕可用区高度
script
<script>
(function() {
let elementName = document.getElementsByClassName(‘box’)[0];
let elementContent = document.getElementsByClassName(‘content’)[0];
/* offsetWidth 为元素的宽度，返回数值, 只读属性(可以读取 css 文件里的值，也可以读取内联样式里的值)
* 当 box-sizing 为 content-box 时，offsetWidth=(padding-left)+(padding-right)+(border-left)+(border-right)+width
* 当 box-sizing 为 border-box 时，offsetWidth=width
* 当元素本身未设置宽时，读取的是父元素的宽度减去元素本身设置的 margin 值
* */
let elementWidth = elementName.offsetWidth;
console.log(elementWidth);
/* clientWidth 为元素的宽度，返回数值，只读属性(可以读取 css 文件里的值，也可以读取内联样式里的值)
* 在元素未溢出时：
* 当 box-sizing 为 content-box 时，clientWidth=(padding-left)+(padding-right)+width
* 当 box-sizing 为 border-box 时，clientWidth=width-(border-left)-(border-right)
* 当元素本身未设置宽时，读取的是父元素的宽度减去元素本身设置的 border 值
* 元素溢出时(子元素宽度大于父元素宽度)：
* clientWidth 为除了边框及 X、Y 向滚动条的宽度(可视区)
* */
let elemClientWidth = elementName.clientWidth;
console.log(elemClientWidth);
/* style.width 为元素的宽度，返回字符串(包含单位)，可读写
* 原样的输出内联 style 里设置的 width 值，必须显示的设置，否则为空
* */
let styleWidth = elementName.style.width;
console.log(styleWidth);
/* scrollWidth 为元素的宽度，返回数值(包含 padding 值，不包含边框宽度值)
* 当元素没有溢出时(子元素宽度小于父元素宽度)：此时与 clientWidth 值一样
* 当元素溢出时：(溢出值 = 子元素 offsetWidth-[父元素 offsetWidth-(父 padding-left)-(父 border-left)])
* 当子元素 box-sizing 为 content-box 时，scrollWidth= 子元素 offsetWidth+(父 padding-right)
* 当子元素 box-sizing 为 border-box 时，
* scrollWidth= 子元素 offsetWidth+(父 padding-right)-(子 border-left)-(子 border-right)-(子 padding-right)-(子 padding-left)
* */
let elemScrollWidth = elementName.scrollWidth;
console.log(elemScrollWidth);
/* offsetTop 为元素的上外缘距离最近采用定位的父元素内壁的距离，返回数值，只读
* 如果父元素中没有采用定位的，则是获取元素的上外边缘距离文档对象内壁的距离
* 定位只能为 position:relative，其他定位值获取的是文档对象内壁的距离
* */
let elemOffsetTop = elementName.offsetTop;
console.log(elemOffsetTop);
/* offsetLeft 为元素的左外缘距离最近采用定位的父元素内壁的距离，返回数值，只读
* 如果父元素中没有采用定位的，则是获取元素的左外边缘距离文档对象内壁的距离
* 定位只能为 position:relative，其他定位值获取的是文档对象内壁的距离
* */
let elemOffsetLeft = elementName.offsetLeft;
console.log(elemOffsetLeft);
/* scrollHeight 为元素内容的实际高度
* 包括元素高度、内边距和溢出尺寸，不包括边框和外边距
* 无溢出的情况，与 clientHeight 相同
* */
let elemScrollHeight = elementName.scrollHeight;
console.log(elemScrollHeight);
/* scrollTop 可以获取或者设置对象的最顶部到对象所在当前窗口显示的范围内的顶边的距离
* 也就是元素滚动条被向下拉动的距离
* 返回数值，可读写
* */
let documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(documentScrollTop);
/* scrollLeft 可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离
* 也就是元素被滚动条向左拉动的距离
* 返回数值，可读写
* */
let documentScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
console.log(documentScrollLeft);
/* innerWidth 窗口的文档显示区的宽度(不包含工具条与滚动条)，返回一个数值 */
let windowInnerWidth = window.innerWidth;
console.log(windowInnerWidth);
/* availWidth 为浏览器屏幕的可用宽度，返回数值 */
let screenAvailWidth = screen.availWidth;
console.log(screenAvailWidth);
/* clientWidth 为可视区的宽度，不包含滚动条的宽度 */
let documentClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(documentClientWidth);
elementName.onmousemove = function(event) {
/* eventX 为鼠标相对于浏览器有效区域 (除去工具栏等非 html 文档的区域) 左上角 x 轴的坐标，不随滚动条滚动而改变 */
let eventX = event.clientX;
console.log(eventX);
/* pageX 为鼠标相对于浏览器有效区域 (除去工具栏等非 html 文档的区域) 左上角 x 轴的坐标，随滚动条滚动而改变 */
let pageX = event.pageX;
console.log(pageX);
/* screenX 为鼠标相对于显示器屏幕左上角 x 轴的坐标 */
let screenX = event.screenX;
console.log(screenX);
/* offsetX 为鼠标相对于事件源左上角 X 轴的坐标 */
let offsetX = event.offsetX;
console.log(offsetX);
}
})()
</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 布局）
