本文深入探讨了影响HTML元素水平空间的因素，包括margin、border、padding和width等属性。当这些值的总和不等于父元素内容区宽度时，浏览器会进行自动调整，确保水平方向的平衡。文章详细阐述了浏览器如何处理过度约束的情况，特别是当有auto值存在时的调整策略。总结了在实现元素水平居中时的注意事项，强调width的固定值和左右外边距设置为auto的重要性。
水平方向能影响到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
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
