CSS の絶対位置が要素の幅に与える影響の詳細な説明

1. 問題の原因

切り替えるカルーセルを作成すると、前の画像がスライドアウトするときに前の画像の後ろに空白が表示され、前の画像がすべてスライドアウトするまで 2 番目の画像が表示されません。最初に問題が発生したときに、ネットで検索したところ、タイマー アニメーションがこの状況を引き起こす可能性があるという意見があったため、コードのデバッグでタイマーをコメントアウトして、1 ステップだけ実行すると画像が停止することがわかりました。後ろにはまだ空白スペースがあったので、タイマーの問題ではないと確信しました。そこでボックスモデルを確認したところ、imgをラッピングするコンテナの幅p#mainが、理想的に求めていた6枚の画像の幅の合計ではないことがわかりました。コンテナp#の幅を明示的に設定していないことが判明しました。主要。しかし、ここで問題が発生します。コンテナの幅を明示的に設定しないと、コンテナの幅をコンテンツの充填に合わせるべきではないと合理的に考えることができます。前述の現象によれば、答えは当然ノーです。実際には、位置決めもコンテナの幅に影響するため、これはすべての場合に当てはまるわけではないとも言えます。絶対配置された要素のサイズと配置の関係について説明します。

2. 包含ブロック

まず、包含ブロック (コンテキストの配置) の基本概念を確認してみましょう:

1. 初期の包含ブロック (ルート要素の包含ブロック) はユーザー エージェントによって決定されます。

2. ブロックを含む浮動要素は、最も近いブロックレベルの祖先要素として定義されます。

3. 相対的に配置された、または静的に配置された要素の包含ブロックは、最も近いブロック レベルのボックス、テーブル セル、またはインライン ブロック ボックスの祖先要素 (任意のタイプ) のコンテンツ境界によって形成されます。

4. ブロックを含む絶対配置要素は、静的ではない最も近い位置にある祖先要素 (任意のタイプ) の境界区切り (ブロックレベルの親要素の場合) またはコンテンツ境界区切り (インライン親要素の場合) に設定されます。

3. 幅とオフセット

一般に、要素のサイズと位置は、その要素を含むブロックによって異なります。位置決めとは、要素の各マージン境界が、その要素を含むブロックの対応する側 (内側の境界線と境界線に隣接する側) に対してオフセットされることを意味します。これにより、要素内のすべて (マージン、境界線、パディング、コンテンツ) が移動します。したがって、位置決めされた要素については、次の方程式が存在します (以下の計算はこの方程式に基づいています):

left+margin-left+border-left-width+padding-left+width+padding-right+border-right -width+margin -right+right=包含ブロックの幅 (式1-1)

これによると、要素の幅と高さが定義されていない場合、その値は配置によって影響を受けます。配置された要素の幅と高さを設定する必要があるかどうかは、状況に応じて決定する必要があります。幅と高さを決定するには、次の状況を考慮してください。

1. オフセット属性の上、左、下、右がすべて決定されているが、外側のマージン、内側のマージン、境界線が設定されていない場合、幅と高さは明示的に設定されている場合、値は offset 属性によって決定されます。それ以外の場合、マージンまたはパディング (自動もカウントされます) が設定されている場合、高さと幅は境界線の明示的に設定された値になります。幅と高さは依然としてオフセット属性によって決定されます。

2. 非置換要素の水平軸の動作:

1) 左、幅、右がすべて自動で、内側と外側のマージンまたは境界線が設定されていない場合、要素の計算された左側が配置されます。静的位置 (左から右に読みます) では、幅は「適切に拡張」され、右は上記の方程式に従って残りの水平距離です

2) 方程式内のすべての値が固定値の場合、要素が「過度に制限されている」場合、right は上記の式に従ってリセットされます ;

3) 上の式の 1 つの属性値のみが auto の場合、要素が「過度に制限されている」場合、この属性値は式を満たすようにリセットされます";

4) 垂直軸のルールも似ていますが、静的な位置を取ることができるのは上部のみであり、下部はできないことに注意してください。

3. 置換要素の場合 (置換要素には固有の幅と高さがあるため、ここでは「適切な拡張」という概念がないことに注意してください):

1) まず、その幅 (高さ) が明示的に宣言されているかどうかを確認します。明示的に宣言されている場合は値、それ以外の場合は要素コンテンツの実際のサイズ (幅と高さ) によって決まります

2) もう一度左を見てください。top が auto の場合は、静的な位置に置き換えます。 ) もう一度左と下を見て、値がまだ auto であれば、マージンの auto を 0 に設定します。0 に設定されていない場合は、左右に等しいように設定します。 、上と下が等しい;

4) この後、auto 値が 1 つだけ残っている場合、それは非置換要素と同様で、方程式の値に従って auto がリセットされます。

5) 要素が「過度に制約されている」場合、ユーザー エージェントは、置換されていない要素と同様に、右 (左から右に読む) と下を無視します。

上記は、絶対に配置された要素の実際に表示される幅と高さの影響要因の分析です。インターフェイスの表示効果が期待したものと矛盾していることがわかった場合は、上記の観点から分析することを検討できます。要素の幅と高さの値、または上記の他の属性の値を再決定する必要があります。

4. よくある状況の分析

次に、プロジェクトで遭遇した幅と高さの問題の実際の例を分析してみましょう。ここで説明する仮定の状況は次のとおりです。幅と高さを持つ最も外側の p#rel は相対位置に設定され、そのサブ p#abs は幅を設定せずに left のみを固定値に設定します (内部および高さがないという前提の下)。外部マージンと境界線)、p#abs 内部にはさまざまなタイプの要素が含まれます。

1. まず、最も内側のパッケージがブロックレベルの要素である場合について説明します。コードは次のとおりです。

<p>
    </p><p>
        </p><p></p>
        <p></p>
    

*{margin:0;padding: 0}#rel1{position: relative;width: 120px;height: 50px;background-color: yellow;}#abs1{position: absolute;top: 0;left: -15px}#box1{width: 50px;height: 50px;background-color: red}#box2{width: 50px;height: 50px;background-color: blue}

コードからわかるように、マージンを設定し、絶対位置の要素のパディングを 0 に設定し、ボーダーを使用しない場合、上記の式 1-1 は次のように簡略化されます。 − U M US I 要素の左側は固定値です。幅と右が設定されていませんなので、後の 2 つは初期値 auto です。非置換軸 1) の水平方向の動作によれば、最初に幅、つまり のサブ要素の内容を適切に拡張する必要があることがわかります。絶対位置の要素は right right に配置され、3 つの属性の合計が絶対位置を含むブロック p#rel の幅 120px と正確に等しくなるように、 right の値が自動的に計算されます。したがって、このときの絶対配置要素 p#abs の幅の値は、その内容によって決まります。以下に示す 2 つの状況 (コードで子 p#box1 の幅を変更してテスト) では、絶対配置要素の幅が決まります。要素は常に子と等しくなります。p の最大の幅を持つ値です。左の値は影響を受けません。左の値が何であっても、右の値は自動的に調整されるため、幅の値には影響しません。 ️ errree

P 絶対位置決め要素 P#ABS の left+width+right = width

以上がCSS の絶対位置が要素の幅に与える影響の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。