绝对定位中块级元素的水平布局与垂直布局

绝对定位中块级元素的水平布局与垂直布局

在决定定位中，块级元素在包含块中的位置是由left，right，top，bottom决定的，而其在包含块中所占据的空间是由它的组成内容决定，即margin，border，padding，content，因此元素将满足以下两条公式：

(1)就宽度而言

left + margin-left + border-left-width + padding-left+ content-width + padding-right+ border-right-width + margin-right + right = containing block width

(2)就高度而言

top + margin-top + border-top-width + padding-top+ content-height + padding-bottom + border-bottom-width + margin-bottom + right = containing block height

  CSS就是根据上述这些属性来决定块级元素的水平布局和垂直布局，当上述属性值发生冲突或是未定义时，CSS将按照一定规则来进行动态调整，以确定所有属性的值。就水平布局来说，相关属性的动态调整规则如下，垂直布局类似，不详细进行介绍。

A. padding-left, padding-right,border-left-width,border-right-width由作者定义，若作者未定义，则默认为0，不再发生变化；

B. left，right，content-width，margin-left，margin-right会根据不同的情况进行自动调整，其规则如下：

1. 如果left，right，content-width都给定，且margin-left和margin-right 为auto时,margin-left和margin-right会被设置为相等。

2. 如果left，right，content-width都给定时，且margin-left和margin-right 只有一个为auto,那么这个为auto的margin就根据公式(1)计算得到。

3. 如果left，right，content-width，margin-left，margin-right都给定，如果文档流顺序为从左到右，则忽略margin-right的设定值，根据公式(1)计算margin-right，否则忽略margin-left。

4. 如果left，right，content-width存在auto的情况，则margin-left和margin-right都设为0；同时分情况讨论:

   4.1 如果left，content-width为auto，则content-width根据内容自适应缩放，left根据公式(1)进行计算；right，content-width为auto的情况类似；

   4.2 如果left，right为auto，如果文档流顺序为从左到右，则等于0，right根据公式(1)进行计算；

   4.3 如果只有一个是auto，就根据公式(1)计算该值；

   4.4 如果left，right，content-width都是auto；若文档流式从左到右，则设置left为0，按照right，content-width为auto的情况处理；否则设置right为0，按照left，content-width为auto的情况处理；

参考资料：

[1] CSS Pocket Reference