CSS水平布局设置auto注意事项

thtwin

margin-left , margin-right ,width 三者都可以设置成atuo而其它的如:margin-top ,margin-bottom ,padding不能够设置成auto到，并且只有边界可以为负值，其它的都不能够为负值



对于前三者,如果内补白为0,外边框内容宽度为:400px
情况一:margin-left:100px width:100px margin-right:auto(只设置两者)
则：margin-right:200px
注意：如果前三者中只有一个被设置为auto,而其它两者都设置具体的值，那么设置为auto属性的值为使元素框宽度等于父元素宽度所需要的值

情况二:margin-left:100px width:100px margin-right:100px (三者都设置)
则margin-right:200px ;(之前设置的100px不起作用)
注意：如果三者都设置具体的值，没有一个属性设置为auto，那么margin-right被强制设置成auto

情况三:margin-left:100px width:auto margin-right:100px  
等价于 margin-left:100px margin-right:100px
注意：将宽度设置为auto，而其它两者均有值，那么width将会设置为达到父边框内容宽度的值

情况四:margin-left:auto width:100px margin-right:auto
结果将会是width居中，margin-left与margin-right设置成一样的值,这样就可以起到将元素居中的效果 (有的浏览器不支持)

情况五:三者中有两个边界元素之一与宽度设置成auto，那么设置成auto的边界值将自动降为0 如:
margin-left:auto width:auto margin-right:100px ;

情况六:三者均设置为auto，那么边界全为0，这种情况与不设置边界与宽度的默认值一样
如:margin-left:auto margin-right:auto width:auto
结果将会是width的值等于外边框内容的宽度，而对应的内容边界水平值全为0

另外的例子:
li{margin-bottom:20px;}
ul{maring-bottom:-15px;}
h1{margin-top:-18px;}

这样最后得到的结果为:20 + (-18px) = 2px 说明最终ul的底部与h1的顶部之间只有2px的距离