元素的水平方向布局:元素在其父元素中水平方向的位置由以下几个属性共同决定
1)margin-left
2)margin-left
3)padding-left
4)width
5)padding-right
6)border-right
7)margin-right
一个元素在其父元素中,水平布局必须要满足以下的等式
margin-left+margin-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度
PS:若以上等式不满足,则称为过渡约束,则等式会自动调整。
调整的各种情况如下:
1. 如果这七个值没有auto的情况下,则浏览器会自动调整margin-right的值使得等式成立。
(有auto的三个值:width(默认情况下是auto)、margin-left和margin-right)
2. 如果宽度和外边距设置为auto的情况下,width值会调整到最大
3. 如果三个值都设置auto,则宽度最大,外边距都为0;
4. 如果将两个边距设置为auto,width设置一个固定值,则两个边距设置为相同的值。(可达到居中的效果)