css的边偏移距离针对left和right可能性值的分析

这篇文章主要介绍了关于css的边偏移距离针对left和right可能性值的分析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

css的边偏移距离在布局中起到了一定的作用，下面针对left和right所有可能性值做一下简单的介绍，感兴趣的你可以参考下本文或许对你学习css有所帮助

1). 'left' 和 'right' 的设定值都是 "auto"
如果 'left' 和 'right' 的值都是 "auto" （它们的初始值），计算后的值( computed value )为 0（例如，框区留在其原来的位置）。2). 'left' 或 'right' 其一的设定值为 "auto"
如果 left 为 ‘auto’，计算后的值(computed value)为 right 的负值（例如，框区根据 right 值向左移）。 如果 right 被指定为 ‘auto’，其计算后的值(computed value)为 left 值的负值。
示例代码： 

<p style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></p>

上述代码中，p 元素是相对定位的元素，它的 'left' 值是 "100px"， 'right' 没有设置，默认为 "auto"，那么，'right' 特性计算后的值应该是 -left，即 "right:-100px"。

3). 'left' 和 'right' 设定值都不是 "auto"
如果 'left' 和 'right' 都不是 "auto"，那么定位就显得很牵强，其中一个不得不被舍弃。如果包含块的 'direction' 属性是 "ltr"， 那么 'left' 将获胜，'right' 值变成 -left。如果包含块的 'direction' 属性是 ‘rtl’，那么 'right' 获胜，'left' 值将被忽略。
示例代码：

<p style="width:100px; height:100px; overflow:auto; border:1px solid blue;"> 
<p style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></p> 
</p>

最后，'left' 应该比较强悍才对。
'top' 和 'bottom' 的特性值
'top' 和 'bottom' 特性将相对定位元素向上或者向下移动，而不改变其大小。'top' 把框向下移动，而 'bottom' 将其向上移动。 由于 'top' 和 'bottom' 没有造成框被拆分或者拉伸，计算值总是 top=-bottom，如果两个都是 "auto"，其计算值就都是 0，如果其中之一是 auto，它就是另一个的负值。 如果都不是 "auto"，'bottom' 被忽略，这时，'bottom' 的计算值会是 'top' 值的负值。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS banner图响应式居中显示的方法

CSS中如何使用负margin值来调整居中位置

Atas ialah kandungan terperinci css的边偏移距离针对left和right可能性值的分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!