水平布局
元素的水平方向的布局:
元素在其父元素中水平方向的位置由以下7个属性共同决定“
margin-left
border-left
padding- left
width
padding-right
border-right
margin-right
一个元素在其父元素中,水平布局必须要满足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度(必须满足)
以上等式必须满足,如果相加结果使等式不成立,则称为过渡约束,则等式会自动调整
调整的情况:
如果这七个值中没有为auto 的情况,则浏览器会自动调整margin-right值以使等式满足
但是
width
margin-left
maring-right
如果某个值为auto, 则会自动调整为auto的那个值以使等式成立
如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0
如果将三个值都设置为auto,则外边距都是0,宽度最大
如果将两个外边距设置为auto,宽度固定值,则会将两个外边距设置为相同的值
所以我们经常利用这个特点来使一个元素 在其父元素中水平居中
示例:
width: xxxpx ;
margin:0 auto;/左右两个外边距会自动调整成一样,从而使元素水平居中/