左右の可能性値に対する CSS エッジ オフセット距離の分析

この記事では、CSSのエッジオフセット距離の可能な値の分析を主に紹介します。これで、必要な友人に参照できます。 CSS のエッジ オフセット距離は、レイアウトで特定の役割を果たします。ここでは、left と right のすべての可能な値について簡単に説明します。興味がある場合は、この記事を参照してください。 cssを学ぶため

1)。「left」と「right」の設定値は両方とも「auto」です

left が 'auto' の場合、計算された値 (計算値) は right の負の値になります (たとえば、ボックス領域の向きは次のようになります)。右の値に) 左にシフト)。 right が「auto」として指定されている場合、その計算値は left の値の負の値になります。
サンプルコード:

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

3) 「左」も「右」も「自動」ではありません。

サンプルコード:

<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>

'top' および 'bottom' 属性は、サイズを変更せずに、相対的に配置された要素を上下に移動します。 'top' はボックスを下に移動し、'bottom' はボックスを上に移動します。 'top' と 'bottom' によってボックスが分割または引き伸ばされることはないため、両方が "auto" の場合、計算値は常に top=-bottom になります。一方が auto の場合、計算値は 0 になります。これはもう一方の負の値です。 どちらも「auto」でない場合、「bottom」は無視され、「bottom」の計算値は「top」値のマイナスになります。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

以上が左右の可能性値に対する CSS エッジ オフセット距離の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。