水平布局
margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right = 其包含块的内容区的宽度
当我们开启了绝对定位后:
水平方向的布局等式就需要添加 left 和 right 两个值:left + margin-letf + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其包含块的内容区的宽度
当发生过度约束,也就是等式两边不相等时:
- 如果9个值中没有 auto ,则自动调整 right 值以使等式满足
- 如果9个值中有 auto ,则自动调整 auto 的值以使等式满足
- 这时候可以设置 auto 的值有:margin、width、left、right
- 因为 left 和 right 的值默认是 auto ,所以如果不指定 left 和 right 的值,当等式不满足时,会自动调整这两个值
垂直方向的布局此时也需要满足等式:
top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 其包含块的内容区的高度
使元素在父元素内水平垂直居中:
<!DOCTYPE html>
<html>