margin: auto与absolute绝对布局的关系

最新推荐文章于 2022-11-29 22:53:04 发布

莱夹威

最新推荐文章于 2022-11-29 22:53:04 发布

阅读量475

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/weixin_42395136/article/details/119336634

版权

一、先说结论

absolute绝对布局是否会令margin: auto失效？
结论是 margin: auto在absolute布局中并不会失效

下面会说明几个问题
1、为什么不会
2、为什么我的页面里margin: auto失效了
3、怎样才能让它起作用

二、margin: auto的填充规则

要探究两者之间的关系，首先要了解margin: auto的填充规则

如果一侧定值，一侧auto，则auto为剩余空间大小
如果两侧均是auto，则平分剩余空间

三、验证

第一步：创建两个元素：

<style>
        html,
        body {
            background-color: gray;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    	.first {
            width: 100px;
            height: 100px;
            background-color: brown;
        }

        .second {
            width: 100px;
            height: 100px;
            background-color: salmon;
        }
</style>
<body>
    <div>
        <div class="first"></div>
        <div class="second"></div>
    </div>
</body>

效果如图所示：
在这里插入图片描述

按F12，选择“second”元素，将鼠标放在图中右下角的margin框上，可以看到上方second方块右侧出现了一行黄色区域，个人理解，这就是margin：auto中的可用空间（剩余空间）
在这里插入图片描述

第二步：设置水平居中

调整second的style，设置margin: 0 auto，可以看到元素水平居中了，此时magin值就是上方提到的可用空间的值除以2。（本人屏幕总宽度为1494，可以通过将鼠标移动到body属性上看到，元素宽度为100，(1494-100)/2 = 697*2）

        .second {
            width: 100px;
            height: 100px;
            background-color: salmon;
            margin: 0 auto;
        }

在这里插入图片描述

第三步：设置second元素为absolute

        .second {
            width: 100px;
            height: 100px;
            background-color: salmon;
            position: absolute;
            margin: 0 auto;
        }

在这里插入图片描述

此时second元素脱离了文档流，看起来margin: 0 auto失效了，视觉上和第一步没什么区别，此时如果second下方还有第三个方块，就可以看到第三个方块上移到second的位置，这里不多赘述。

second元素脱离了文档流，如何做到仍然保持在原位的？原因是绝对布局自动为second元素设置了偏移量(top/left/bottom/right)，也就是说，second元素的top/left/bottom/right默认并不为0，如下图所示。
在这里插入图片描述

为什么margin: 0 auto会失效？因为这为了保持元素停在原位而自动设置的偏移量，占据了margin的可用空间，此时再将鼠标放至margin范围上，屏幕上不再出现黄色区域，因为position偏移量限制了盒模型的大小，这个大小正好与盒模型content内容相同，盒模型是由content+padding+border+margin组成的，因此已经没有多余的空间可以分配给margin了，也就是margin的可用空间为0。

第四步：重铸margin: 0 auto荣光

既然position偏移量压缩了margin的可用空间，那修改缩小偏移量是否能够复原margin: auto的效果？

从上图来看，right被设定为1394，现在把它改为1000px，看看效果

        .second {
            width: 100px;
            height: 100px;
            background-color: salmon;
            margin: 0 auto;
            position: absolute;
            right: 1000px;
        }

在这里插入图片描述

可以看到元素发生了偏移，但margin并没有生效，可以看到在我们手动设置right:1000px后，left被自动修改为394了，一来一回又被填满了，元素宽度100+right1000+left394正好等于屏幕宽度1494，margin还是没有可用空间

那同时设定right和left会有什么效果呢？

        .second {
            width: 100px;
            height: 100px;
            background-color: salmon;
            margin: 0 auto;
            position: absolute;
            right: 1000px;
            left: 0;
        }

在这里插入图片描述

效果如图，margin出现了，重置margin: auto荣光，吾辈义不容辞

效果更明显一点，right和left都设为0，可实现水平居中
在这里插入图片描述

tip: 可通过设定top和bottom为0实现文档流布局中margin: auto无法实现的垂直居中！

总结：

因为元素脱离文档流，absolute为了保持元素在指定位置，自动为元素填充了left\right\top\bottom的值，没有留出能够让auto产生效果的剩余空间，只要修改left\right\top\bottom留出一定的空间，margin：auto即可生效，并且相比于文档流，在absolute布局中还可以实现垂直居中

个人拙见，若有不对之处，欢迎大佬批评指正

莱夹威

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
margin: auto与absolute绝对布局的关系

一、先说结论absolute绝对布局是否会令margin: auto失效？结论是 margin: auto在absolute布局中并不会失效下面会说明几个问题1、为什么不会2、为什么我的页面里margin: auto失效了3、怎样才能让它起作用二、margin: auto的填充规则要探究两者之间的关系，首先要了解margin: auto的填充规则如果一侧定值，一侧auto，则auto为剩余空间大小如果两侧均是auto，则平分剩余空间三、验证第一步：创建两个元素：<styl
复制链接

扫一扫