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

このうち、絶対配置要素の左側は固定値に設定され、幅は「適切な拡張」の原則に基づき、その最大値は幅の合計になります。ただし、デフォルトではブロックレベルの要素が垂直に配置されるため、right の値は少し異なります。インライン要素は左から右に並べて配置されます (中央の隙間は float:left でクリアできます)。途中で改行はありません。したがって、インライン要素が絶対位置のブロックレベル要素内に配置され、要素のコンテンツ幅が広すぎる場合、インライン要素の特性により、コンテンツは、それを含むブロックコンテンツの右端まで引き伸ばされてしまいます。したがって、インライン要素が 内側の要素 (つまり、絶対要素の内容) を 0 に制限したときの RIGHT の値は、式 1-1 のように簡略化されます。

絶対位置決め要素 pt+width = 包含ブロック P#relur 幅

もちろん、この状況は、左の設定値が一定の範囲内にあるという前提の下にあるはずです（幅が異なるため）設定されている場合は自動です)、ではこの範囲をどのように決定するのでしょうか?絶対配置要素の幅がその最小値と最大値に正確に等しい場合、上記の式を使用して左の範囲が (ブロック幅を含む - 絶対配置要素の最大幅) ~ (ブロック幅を含む - に設定されることを確認します)絶対位置要素の最小幅) left が特定の値である場合、絶対位置要素の幅は left 値の影響を受けます。 left が特定の値である場合、上記の式を使用して絶対位置要素の幅を見つけることができます。

left の値が上記の範囲外に設定された場合、絶対配置された要素の幅は極値に達し、left の変更の影響を受けなくなりますが、right は 0 ではなくなります。次の式を満たすように自動的に計算されます:

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

3. 概要、場合前提の:

🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜 🎜 🎜🎜 🎜🎜 🎜🎜 1) 絶対配置要素がブロックレベル要素をラップする場合、その幅の値は常に子要素の中で最大の幅の値と等しくなります。 🎜🎜2) インライン要素が絶対配置要素によってラップされている場合、幅の最大値はサブ要素の幅の合計であり、最小値はサブ要素の最大幅の値です。幅の値に影響を与える左の間隔を最初に見つける必要があり、次にブロックの幅を見つけるためにブロックの左の幅の値が含まれています。 🎜🎜 🎜🎜 5. まとめ 🎜🎜 🎜🎜 ここまで長々と述べてきましたが、実際は同じです。絶対配置された要素の幅が心配な場合は、その要素に固定幅の値を明示的に設定するのが最善です。ルール 1 に従って、4 つのオフセット属性をすべて設定しなくても、明示的な幅の値が有効になるためです~ ただし、実際の環境では、要素の配置に幅と高さの設定は必ずしも必要ではないため、幅と高さの影響を受ける要素を理解してください。エフェクト表示に関して発生したいくつかの問題にさらに役立ちます。テクノロジーに関するブログを書くのはこれが初めてです。まず、レビューしてくれたエレガントなボーイフレンドに心からの感謝の意を表したいと思います。また、オライリー シリーズ「The Definitive Guide」の著者にも感謝したいと思います。 to CSS, Third Edition」およびその関係スタッフ向けに、この記事の内容の大部分はこの書籍を参照し、独自の理解に基づいて書かれています。この最初の投稿に問題がある場合は、批判して修正してください。ありがとうございます〜🎜

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