关于偏移量及margin值合并

最新推荐文章于 2025-07-08 14:15:23 发布

一只叮code的小蚊子

最新推荐文章于 2025-07-08 14:15:23 发布

阅读量392

点赞数

CC 4.0 BY-SA版权

分类专栏： html与css 文章标签： margin值合并偏移量

本文链接：https://blog.youkuaiyun.com/ZJW222/article/details/82957600

html与css 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了CSS中的偏移量差异，特别是margin值合并的现象，当两个垂直外边距相遇时，会形成较大者作为合并后的外边距。此外，当特定条件下，如BFC（块格式化上下文）被触发，子元素的margin值可能会影响父元素的位置。解决这个问题的方法包括调整margin值、添加border或padding，或创建BFC。BFC定义了元素如何在垂直方向上布局，并规定了如何处理margin重叠。最后，文章列举了形成BFC的条件，包括浮动元素、绝对定位、display属性指定的特定值以及overflow非visible的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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