先上图

  由图可看到，块级元素的水平方向上又“7大属性”：margin-left、border-left、padding-left、margin-left、width、padding-right、border-right和margin-right。这些属性中，只有3个属性可以设置为auto，分别为：margin-left、width和margin-right。

在讨论之前，首先记住两条原则：

  1）这7大属性的值总和=父元素的width；

  2）属性间冲突时，优先级：width>margin-left>margin-right。

元素的属性width和margin的不同组合情况分如下4种情况：

	(1)	(2)	(3)	(4)
width	定值	定值	auto	auto
margin	定值	auto	定值	auto

（1）width= 定值，margin=定值

  此种情况即为width、margin-left、margin-right均为定值，为过分受限，根据原则2，此时总会把margin-right强制为auto。
  也就是说，为了达到原则1，margin-right会根据情况调整，使元素的总宽度等于其包含快的width。

（2）width= 定值，margin=auto

  * width= 定值，margin-left = mergin-right = auto，此时margin-left与margin-right会设置为相等的长度，因此元素会在父元素中居中
  * width= 定值，margin-left和mergin-right中一个为定值、一个为auto，则为auto的属性根据原则1，自动调整。

（3）width= auto，margin=定值
  * marin-left + margin-right < 父元素宽度，则width根据原则1设置为某个值
  * marin-left + margin-right >= 父元素宽度，则width为0

（4）width= auto，margin=auto

  * width、margin-left、mergin-right均为auto，这就是默认的情况，此时两个外边距会设置为0，width会尽可能宽以达到原则1。
  * width = auto，margin-left和mergin-right中一个为定值、一个为auto，此时，根据原则2，width为占用剩下的所有宽度，为auto的margin的值为0。

以上是针对块级元素，对于非块级元素（内联元素和替换元素）：

  * 只要设置为display:block，除了元素的宽度为内容的固有宽度这一点，其他表现与块级元素表现一致。
  * 如果不设置display:block， 则width为内容的固有宽度，水平方向margin可以设定为固定值，但设置为auto会表现为0；