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

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