块元素设置margin:0 auto为什么会居中?

首先解释一下auto自适应

行盒的width和height的auto它是适应我们的内容,内容多大宽高多大块(块盒的高度也是这样),

块盒的width表示自适应父元素内容区(准确来说是包含块)计算内容区的剩余空间做为值

margin左右为auto也是自适应父元素内容区

例子:

pareant{

    width:400px; 

    height:400px;

    background:red

}

child{

    width:100px;

    height:100px;

    background:linghtblue;

    margin-right:auto

}

<div class="parent">

    <div class="child"></div>

</div>

水平方向能设置为auto的盒模型属性:padding(先不考虑),margin-left,margin-right,width

以上面例子为参考子元素宽占父元素100px 也就是说父元素内容区剩余300px哪margin-right为auto就等于300.

如果子元素宽度和外边距都是auto的情况,

哪子元素宽度(width)占用剩余空间,右外边距(margin-right)为0.

在来说说为什么居中:你想想啊子元素宽度固定,margin左右外边距都为auto值相等都是占用父元素的剩余空间,哪它不就平分剩余空间了

也就是说左右外边距相等不就居中了吗

在来解释块元素为什么独占一行?

首先块元素的盒模型水平方向上的属性(margin padding border content)必须加起来要等于父元素的内容区的宽度(不然我怎么独占一行对不对?)

等式:margin-left+border-left+padding-left+width+margin-right+border-right+padding-right=其父元素内容区的宽度

以上等式必须满足（因为它要独占一行）,如果相加结果不成立,则过渡约束,则等式会自动调整

 如果这7个值没有auto的情况,则浏览器会自动调整margin-right值以使等式满足（让margin-right等于auto来吸收剩余空间因为默认元素从左往右排列的所以调整最后一个值外边距）

 - 这7个值中有三个值可以设置auto ：width margin-left margin-right

 - 如果一个宽度和一个外边距设置为auto,则宽度会调整到最大(width计算剩余空间),设置为auto的外边距会自动为0

 - 如果三个值都设置为auto,这外边距都是0,宽度为最大(同样width计算剩余空间)

 - 如果将两个外边距设置为auto,宽度固定值,则外边距设置为相同的值（值相同平分剩余空间）

    所以经常用这个特点来使一个元素在父元素中水平居中 

有什么问题欢迎指正