[size=x-large]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的距离[/size]
对于前三者,如果内补白为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的距离[/size]