你不知道的margin:auto居中原理

最新推荐文章于 2024-03-22 10:15:53 发布

1900's 88 keys

最新推荐文章于 2024-03-22 10:15:53 发布

阅读量4.2k

点赞数 6

分类专栏： # HTML/CSS 正在路上的前端攻城狮的烂笔记文章标签： html5 css html

本文链接：https://blog.csdn.net/weixin_45660621/article/details/120790091

版权

正在路上的前端攻城狮的烂笔记同时被 2 个专栏收录

90 篇文章 2 订阅

订阅专栏

HTML/CSS

20 篇文章 1 订阅

订阅专栏

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和 即水平方向能影响块级元素布局的就是width、padding-left、padding-right、border-left、border-right、margin-left、margin-right属性。
只有margin-left、margin-right、width可以设置auto属性值。
在没设置浮动属性的块级元素的盒子总宽度就等于父级元素的宽度。

如果margin-left 和margin-right（padding-left和padding-right）中如果只设置了一个值，那么另一个值会

去自适应来补充到父元素的大小。

如果同时设置margin-left、margin-right（padding-left和padding-right）的值，那么浏览器中自动选择其

中影响最小的属性值为auto来适应父级元素的大小。由于浏览器的默认从左向右阅读的，所以最右侧的

空间也是影响最小的，所以 marigin-right 会被浏览器强制作为 auto 来看待。

例如，我在下面代码同时设置了两个div,一个只设置了margin-left为100px，另一个同时设置了margin-left

为100px和margin-right为200px。

<style>
  div
    {   
        height: 20px;
        width: 200px;
        padding: 10px;
        border: 5px solid pink;
    }
    .box1 {
        background-color: lightskyblue;
        margin-left: 100px;
    }
    .box2 {
        background-color: lightblue;
        margin-left: 100px;
        margin-right: 200px;
    }
</style>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>

效果完全一样。
在这里插入图片描述
理解到这些后，通过对上面margin-left、margin-right、width这三个属性可以设置auto属性值可能的组合

以及实现的效果来介绍。

auto值对布局的影响

当margin-left、margin-right、width其中margin-left、margin-right为特定值，width为auto

<style>
    .box1 {
        background-color: lightblue;
        height: 20px;
        border: 5px solid pink;
        padding: 10px;
        margin-left: 200px;
        margin-right: 200px;
        width: auto;
    }
</style>
<body>
    <div class="box1"></div>
</body>

效果为：
在这里插入图片描述
当margin-left、margin-right、width其中两个为特定值，一个为auto值的时候，浏览器会自动调整 auto

那个属性的值，以填充其父元素的 width。例如我最开始举的第一个例子，其中也是把margin-right自动

调整为auto,来适应父级body元素的宽度。

比如第二个例子中div的父级元素是body，通过检查能看到body宽度为764px。
在这里插入图片描述

我在刚才的例子中给div设置了border（5px）、 margin-right:（200px）、 margin-left（200px）、

padding（10px）。

故此，通过计算width =body（width）- border(border-right(5px) + border-left(5px)) - padding（

padding-right(10px）+ padding-left（10px）) - margin-right:（200px）- margin-left（200px）

=764px - 5px × 2 - 10px × 2 - 200px - 200px = 334px。所以div的width为334px。
在这里插入图片描述

当width 为特定值，margin-left 和 margin-right 为 auto

修改上面的代码

        .box1 {
            background-color: lightblue;
            height: 20px;
            border: 5px solid pink;
            padding: 10px;
            margin-left: auto;
            margin-right: auto;
            width: 200px;
        }

效果为
在这里插入图片描述

故此，安装刚才的计算2 × auto =body（width）- border(border-right(5px) + border-left(5px)) - padding

（ padding-right(10px）+ padding-left（10px）) - width = 764px - 5px × 2 - 10px × 2 - 200px = 543px,

所以auto的值为543px ÷ 2 =267px。
在这里插入图片描述
当我们设置margin:auto;或者margin:0 auto时，浏览器就是这样的方式计算水平居中的。

margin-left 或 margin-right 任意一个为特定值，其余为 auto

仍然修改上面的代码

        .box1 {
            background-color: lightblue;
            height: 20px;
            border: 5px solid pink;
            padding: 10px;
            margin-left: 250px;
            margin-right: auto;
            width: auto;
        }

效果为：在这里插入图片描述

当margin-left 和 width 指定为 auto，marign-right 为特定值，那么 margin-left将被浏览器设置为

0，width 将通过上面方式计算出；
当margin-right 和 width 指定为 auto，marign-left 为特定值，那么 margin-right将被浏览器设置为

0，width 将通过上面方式计算出。

三个属性均为 auto

修改上面代码：

        .box1 {
            background-color: lightblue;
            height: 20px;
            border: 5px solid pink;
            padding: 10px;
            margin-left: auto;
            margin-right: auto;
            width: auto;
        }

效果为：
在这里插入图片描述
当三个属性均为 auto时，margin-left 和 margin-right 的值将被浏览器设置为 0，width通过上面方式算出宽度。

1900's 88 keys

关注

6
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
你不知道的margin:auto居中原理

目录auto值对布局的影响当margin-left、margin-right、width其中margin-left、margin-right为特定值，width为auto当width 为特定值，margin-left 和 margin-right 为 automargin-left 或 margin-right 任意一个为特定值，其余为 auto三个属性均为 auto通过对外边距的学习，前端攻城狮都会用margin:auto;或者margin: 0 auto;来对页面块级元素居中布局。本文会对其原理解释。
复制链接

扫一扫