div水平方向布局

元素的水平方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

一个元素在其父元素中，水平布局必须满足以下等式：

						margin-left
							+
						border-left
							+
						padding-left
							+
						  width
							+
						padding-right
							+
						border-right
							+
						margin-right
							=
				其父元素内容区的宽度（必须满足）

注：

以上等式必须满足，若相加结果使等式不成立，则称为过度约束，

则等式会自动调整。

调整的情况：

a）若这七个值中没有auto的情况，则浏览器会自动调整为margin-right

值以使等式满足

b）这七个值中有三个值可以设置为auto

	width					`其值默认为auto`
	
	margin-left				`其默认值为0`
	
	margin-right			`其默认值为0`

---

如果某个值为auto，则会自动调整为auto的那个值以使等式成立

例：

0 + 0 + 0 + auto + 0 + 0 + 0 = 800   则 auto=800

0 + 0 + 0 + auto + 0 + 0 + 200= 800   则 auto=600

200 + 0 + 0 + auto + 0 + 0 + 200= 800   则 auto=400

注：

a）如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大

，设置为auto的margin会自动为0

b）如果将三个值都设置为auto，则外边距都是0，宽度最大

水平居中

c）如果将两个外边距设置为auto，宽度固定值，则会将外边距设置

为相同的值（水平居中），因此我们经常利用这个特点来使一个元素

在其父元素中水平居中

示例：

//水平居中
width:100px;
margin:0 auto;

注：若子元素超出父元素大小，即等式变成0+0+0+1000+0+0+0=800，
则margin-right会被调整成-200，等式就成立了。