水平方向能影响到inner所占位置的因素有哪些?
margin-left border-left padding-left width padding-right border-right margin-right
过度约束:
浏览器规定,元素水平方向7个值相加,必须要等与其父元素内容区的宽度,
如果不等于,浏览器就会进行调整,让等式成立
margin-left+border-left+padding-left + width + padding-right +
border-right+ margin-right=父元素内容区的宽度
40+20+0+100+0+20+0=600
180 != 600
浏览器如何调整
1、如果水平方向7个值当中没有auto,浏览器会自动调整margin-right的值
40+20+0+100+0+20+ 420 =600
2、7个值当中,有3个值可以设置auto,margin-left width margin-right
(1) 设置1个auto 谁是auto,浏览器就调整谁
margin-left
auto+20+0+100+0+20+0=600 auto=460
width
40+20+0+auto+0+20+0=600 auto=520
margin-right
(2)设置2个auto
margin-left width 调整width
width margin-right 调整width
margin-left margin-right 同时调整margin-left margin-right
设置3个auto
margin-left width margin-right 调整的就是width
总结:
1、如果7个值当中有auto,调整的顺序
width > margin-left margin-right
2、如果想让块元素水平方向居中,必须要width为固定值,左右外边距为auto