css布局：为什么margin-right不起效果，如何居中显示。

css布局：为什么margin-right不起效果 ，以及如何居中显示。

不清楚这个问题其实是没有弄明白网页水平布局的一个小原理

假设这里有一个div，在这个div盒子里面有一个小的div盒子
（这里大div盒子称作父元素，小的div盒子称作子元素）

满足一个公式

子元素中的：margin-left，margin-right，padding-left，padding-right，border-left，border-right，width ，相加会等于父级元素的宽。

那么为什么设置了margin-left会有效果，而margin-right就没有效果呢

举个栗子：
比如父级元素宽是800px，子元素的宽设置是300px，上面的等式不成立，那么浏览器会将margin-right调整成600px，这样子才能使以上的式子成立。那么你设置的margin-right就不会有效果

设置auto

当width，margin-left，margin-right中有设置为auto的，则浏览器会该改变这个值，从而适应上面的等式
要是设置多个auto，分情况讨论：
1）宽和其中的一个外边距设置成auto，则调整宽度
（即当有宽度和其他 被设置auto时，会优先改变宽的，使它适应等式）

2）如果固定了小div的宽度，设置了两个外边距为auto，那么两边的外边距就会设置成相同的值

（经常利用这一个特点，来使子元素在其父元素中水平居中，但是注意的是：子元素的width一定要设置，不然会被默认是最大宽度）

在子元素中要设置width， 其中，margin：0 auto；里面0是上下边距，auto是左右边距，左右边距值相同，会使得子元素居中，效果见下图：

黄色是父元素，粉色是小的div，居中显示。