盒子的总宽度= 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通过上面方式算出宽度。

你不知道的margin:auto居中原理相关推荐

CSS实现元素居中原理解析
原文:CSS实现元素居中原理解析在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了.但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人. 让元素水平居中相对比较简 ...
关于margin: auto及margin: 0 auto的一些见解
在写css时margin:auto;使用频率非常高,常用于div的居中. 何为margin? margin是指块级元素的外边距,如下图所示,XXXXX是div中的内容,通过设置margin的值,可控制 ...
margin:auto水平居中和垂直居中的原理分析
margin属性平时写css几乎天天写,再熟悉不过了!今天我们来深入讨论下margin的一些居中的问题(本来这篇文章早就想写的,一直忘记了),话不多说,直接进入正题! 1.margin:auto 有人 ...
css margin属性 auto,css中margin:auto属性的使用方法
css中margin:auto属性的使用方法发布时间:2020-06-25 10:53:17 来源:亿速云阅读:221 作者:Leah 今天就跟大家聊聊有关css中margin:auto属性的使用 ...
margin:auto实现绝对定位元素的水平垂直居中
1.绝对定位元素的居中实现的一般方法兼容性不错的主流用法是: 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. CSS3的兴 ...
CSS中：margin和padding的区别 margin:auto与margin: 0 auto区别
css中padding和margin的区别 margin 外边距 border 边框 padding 内边距 padding-left:10px; 左内边距.padding-right:10px; 右 ...
外边距设置居中HTML,margin水平居中关于margin的居中问题
margin 水平居中 CSS #sm { margin-left: auto; margin-right: auto;} #sm ul,#sm li { float首先新建一个HTML文件,命名为t ...
margin:auto 和margin:0 auto的区别
1.意思不同.margin:auto=margin:auto auto auto auto,表示上下左右都为auto:margin:0 auto=margin:0 auto 0 auto,表示上下为0 ...
解决使用绝对定位absolute后，margin：0 auto居中方法失效
我们都知道,当给一个块级元素设置宽度后,使用margin:0 atuo可以实现水平上的居中. margin:0 auto的理解是,上下边距为0,左右边距为auto(auto是自动调整大小) 在浏览器中 ...

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

目录