05position：绝对定位元素的布局

菜鸟笔记
（一）水平布局
1.若给box2设置绝对定位，其父元素box1没有开启定位，所以box2的包含块为html
…无图…
2.

给box1设置相对/绝对定位，box2的包含块就是box1，则等式left+ margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度必须满足
100（width）+0=500 浏览器会自动给right=400
3.

box2写right：0；黄块跑到右边
100（width）+0（right）=500 浏览器自动设置left=400，
4.

box2 写left：0； 黄块跑到左边，同理浏览器设置right=400

当开启了绝对定位后
-----水平方向的布局等式就需要添加left和right两个值，此时规则和之前一样只是多添加了两个值。
-----当发生过渡约束， 如果9个值中没有auto，则自动调整right以使等式满足
width：100px;
则为0（left）+0（margin-left）+0(border-left）+0（padding-left)+100（width）+0（padding-right)+0(border-right）+0（margin-right）+0(right)=500,会自动把right调整为400

如果有auto，则自动调整auto以使等式满足。
可设置auto的值：margin width left right
6.

把width：auto；
0（left）+0（margin-left）+0(border-left）+0（padding-left)+auto（width）+0（padding-right)+0(border-right）+0（margin-right）+0(right)=500
会自动设置宽度500，
7.
当把width又设置回100px,
0（left）+0（margin-left）+0(border-left）+0（padding-left)+100（width）+0（padding-right)+0(border-right）+0（margin-right）+0(right)=500
浏览器会把right设置为400

注意：上述的前提是left和right都为0
若left和right的值默认是auto，不知道left和right，则等式不满足时，会自动调整这两个值

11.

如果要通过margin设置水平居中的话，
则必须带上left：0；
right：0；
（二）垂直居中
12.

13.

14.

15.

16.

17.