后知后觉 -- CSS

一、随便说说

最近看了CSS权威指南中有关定位的部分，看的过程中我慢慢的发现CSS属性的 默认值 的重要性,现做有关 绝对定位 如下分享：

二、定位描述

确定元素的位置，你可以根据元素的常规位置(relative)重新定义元素，也可以根据父元素或者祖辈元素(absolute)重新定义元素，还可以根据视窗(fixed)来重新定义元素。

三、在定位上，子元素与父元素的关系

<div class='father'>
    <div class='child'></div>
</div>

计算关系如下：

$father.width = child.width + child.border + child.left + child.right + child.marginLeft + child.marginRight + child.paddingLeft + child.paddingRight$

解读：

上述等式中，margin 与 padding 的默认值都是0，right、left、top、bottom的初始值都是auto，也就是说当我们指定了left、right、top、bottom的值后，子元素的宽度与高度也就确定了。

四、定位规则

• 当元素的宽和高没有被确定时，如果left、right、top、bottom的任意一值是auto，那么此时元素就不会被显示出来（此时元素的宽和高至少有一个是0）
• 当元素的宽和高确定时，上述等式中，如果左面大于右面的值，那么此时右面的值中，值为auto的属性将会去主动补全差值，如果left和right同时为auto，那么right（垂直方向为bottom）将会去主动补全差值
• 当元素的宽和高确定时，上述等式中，如果左面的值小于右面的值，那么此时在水平方向上，right属性的值将会被忽略，垂直方向上bottom的值将会被忽略

五、证明结论成立

这个就留给你们啦，晚安各位。