PHP知识、源码、教程、框架、程序分享! -- PHP社区 关于我们 联系我们 联系电话 联系QQ

CSS样式绝对定位元素的垂直布局

发表时间:2013-09-06 点击:

[本文摘要]:CSS样式 绝对定位元素的垂直布局 在管辖这些元素的布局的方程是: top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom + horizontal scrollbar heig...

CSS样式绝对定位元素的垂直布局

在管辖这些元素的布局的方程是:

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom + horizontal scrollbar height (if any) = height of containing block = 身高包含块

任何水平滚动条的高度,是由在用户代理和不能用CSS影响。

对于元素nonreplaced ,所采用的步骤,以确定垂直布局是:

1. 如果所有的顶部,高度和底部是汽车,机顶盒静态位置和应用步骤3c中给出的规则。

2. 如果没有顶部,高度和底部是自动,挑一个规则适用于从以下列表:

a. 如果两者的margin-top和利润率底设置为auto,解方程额外的约束下,这两个利润得到平等的价值观。

b. 如果只有一个保证金顶或利润率底设置为auto,解决该值的方程式。

c. 如果值过约束(没有设置为自动) ,忽略底部的值, ,解决该值。

3. 如果顶部,高度和底部的一些汽车,但其他人都没有,挑一个规则适用于从以下列表:

a. 如果顶部和高度自动和底部,高度是基于元素的内容(因为这将是在静态流) 。任何自动复位值的margin-top和利润率底为0,并解决方程式顶部。

b. 如果顶部和底部是汽车和高度不设置顶部的静态位置。任何自动复位值的margin-top和利润率底为0,并解决方程底部。

c. 如果高度和底部是自动和顶部,其高度是基于元素的内容(因为这将是在静态流) 。任何自动复位值的margin-top和利润率底为0,并解决方程底部。

d. 如果是汽车和高度和底部没有任何自动复位值的margin-top和利润率底为0,并解决顶级的方程式。

e. 如果高度是汽车,顶部和底部都没有任何自动复位值的margin-top和利润率底为0,并解决方程高度。

f. 如果底部是汽车和顶部和高度都没有任何自动复位值的margin-top和利润率底为0,并解决方程底部。

替换元素,用于确定垂直布局的步骤:

1) 联替换元素的高度(参见第14页上的“直插式布局” )确定的价值。

2) 如果顶部和底部都设置为auto,设置顶部静态榜首位置。

3) 如果值过约束,忽略底部的值解决该值。

版权声明:本文系技术人员研究整理的智慧结晶,转载勿用于商业用途,并保留本文链接,侵权必究!

本文链接:http://php.aixc.cn/web/css/144.html

声明:本站技术及源码均为原创,转载请勿用于商业用途,并注明出处及原文链接,侵权必究。