水平方向有七个值。
margin-left+border-left+padding-left+width+padding-right +border-right+ margin-right
浏览器的规则:
水平方向的七个值相加必须等于其父元素内容区的宽度,如果不等于,
那么浏览器就会自动调整七个值中的某值,让其成立,这就叫过度约束
10+10+20+100+20+10+10 ==600 ??
如何调整:
1、七个值中如果没有auto,那么浏览器默认调整的是margin-right
10+10+20+100+20+10+ 430 ==600
2、七个值中如果有auto,则浏览器就会调整auto
可以设置auto大小的属性,是margin-left width margin-right
(1) 1个auto,谁是auto,浏览器就调整谁
(2)2个auto
margin-left width auto margin-right固定值 调整width
width margin-right auto margin-left固定值 调整width
margin-left margin-right auto width 固定值 左右外边距平分,盒子会居中显示
(3)3个auto