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

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

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

「left」と「right」の値が両方とも「auto」の場合（それらの初期値）値）の場合、計算値（計算値）は 0 になります（たとえば、ボックス領域は元の位置に残ります）。 2) 'left' または 'right' のどちらかの設定値は "auto" です。

left が 'auto' の場合、計算された値 (計算値) は right の負の値になります (たとえば、ボックス領域の向きは次のようになります)。右の値に) 左にシフト)。 right が「auto」として指定されている場合、その計算値は 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) 「左」も「右」も「自動」ではありません。

「左」も「右」も「自動」ではない場合、位置決めは非常に現実離れしたものになり、どちらかが廃棄しなければなりません。含まれているブロックの「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>

最後に、「左」を強くする必要があります。

'top' および 'bottom' 属性値

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

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

関連する推奨事項:

CSSバナー画像をレスポンシブに中央に表示する方法について

CSSで負のマージン値を使用して中央の位置を調整する方法

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