水平方向margin：auto

Posted 2020-12-26 youhong

先上图

??由图可看到，块级元素的水平方向上又“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；