CSS

CSS--绝对定位解析

position : absolute;
left : 10px || 10% || auto
默认值:auto
left right的百分数相对于包含块的宽度
top bottom 相对于包含块的高度
定位是相当于最近的非static祖先元素或者根元素
在left right都声明的情况下:
计算公式 left+margin-left+border+width+padding+margin-right+right=包含块width+padding

下面只深入解析left right都声明的情况

①定位元素没指定宽度,指定了left和right,没指定margin
元素在包含块水平居中,width被拉伸

②定位元素没指定宽度,指定了left和right,指定了margin
如果左右margin都为auto,和第一种情况是一样的,如果有一个为auto,另一个为某个值,为auto的会为0,width拉长。

③定位元素指定了宽度,指定了left和right,没指定margin
right会失效,重新计算

④定位元素指定了宽度,指定了left和right,指定了margin
如果margin都为auto,两margin会拉伸并相等,让等式满足。
如果只有一个为auto,为auto的会自动拉升(必须显示声明)
如果只有一个margin显示声明为定值,另一个没声明,right会重新计算。
如果只有一个为auto,另一个没声明,margin会拉伸以满足等式。

综上 ,声明了width的,width永不会变,没声明width,width会尽量变现得长一点。

垂直方向和水平规则是一样的。
过度受限时,会重新计算bottom.
left right top 为auto时是与其假设为静态时的位置对齐的。 bottom不行