在定位情况,元素的水平方向,增加了两个值 ,从原来的7个值变为9个值
但依然遵循过度约束的原则,即水平方向9个值相加必须要等于其父元素内容区的宽度
如果不等于的话,浏览器就会进行约束调整:
left margin-left border-left padding-left width
padding-right border-right margin-right right
0 0 0 0 100 0 0 0 0 =400
如何调整:
1、如果9个值中没有auto,调整的就是right
2、如果有auto,9个值当中,有left margin width right 4个值可以设置auto
1个auto
left margin width right 中设一个auto,其他的值为固定值
浏览器就调整这个auto
2个auto
left margin 调整的就是left
left width 调整的就是left
left right 调整的就是right
margin width 调整的就是width
margin right 调整的就是right
width right 调整的就是right
3个auto
left margin width 调整的就是left
left margin right 调整的就是right
margin width right 调整的就是right
4个auto
left margin width right 调整的就是right
总结:
1、如果9个值当中,没有auto,调整的就是right
2、如果9个值当中,有auto,调整的顺序
right>left>width>margin
3、在绝对定位的情况,如果right,left,top,bottom,width为固定值
margin为auto,元素就会水平垂直居中