要素の幅に対する絶対位置の影響

1. 問題の原因

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

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. オフセット属性のtop、left、bottom、rightがすべて決定されているが、margin、padding、borderが設定されていない場合、幅と高さが明示的に設定されているかどうかにかかわらず、値はoffset属性によって決定されます。 ; 逆に、マージンまたはパディングが設定されている場合 (自動も考慮)、境界線の高さと幅は明示的に設定されていない場合でも、offset 属性によって決定されます。 。

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

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

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

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

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

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

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

2) もう一度左側を見てください。上部が自動の場合は、静的な位置に置き換えます。

3) 左と下の値がまだ自動である場合は、マージンの自動を 0 に設定します。0 に設定されていない場合は、左と右、上と下に等しいように設定します。

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

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

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

4. よくある状況の分析

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

1. まず、最も内側のレイヤーがブロックレベルの要素でラップされている場合について説明します。以下のコードを参照してください。

リーリー

リーリー

コードから、絶対位置の要素のマージンとパディングを 0 に設定し、境界線がないことがわかります。その場合、上記の式 1-1 は次のように簡略化されます。

                                        　绝对定位元素div#abs的 left+width+right = 包含块div#rel的 width

 

     由于绝对定位元素的left是定值，而未设width和right，所以后两个都是初始值auto，根据非替换轴的水平行为1）可知，先将width恰当收放，也就是以绝对定位元素的子元素内容刚好放好为准，再自动计算right的值，使三个属性之和刚好等于绝对定位的包含块div#rel的宽度120px。因此，此时绝对定位的元素div#abs的宽度width的值由其内容决定，在如下图两种情形下（通过代码改变子div#box1的宽度进行测试），绝对定位元素的width始终等于子div中宽度最大的那个值。且不受left值的影响，因为无论left值为多少，其right的值都会自动调整，从而不影响width的值。

 

         　　　　　　　      　　

 

     2.再来看最内层包裹的是替换行内元素的情况，代码及示意图如下：

 

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="rel2"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="abs2"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/pic1.jpeg"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">=""</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="img1"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/pic2.jpeg"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">=""</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="img2"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

<span style="color: #800000">*</span>{<span style="color: #ff0000">margin</span>:<span style="color: #0000ff">0</span>;<span style="color: #ff0000">padding</span>:<span style="color: #0000ff"> 0</span>}<span style="color: #800000">
#rel2</span>{<span style="color: #ff0000">position</span>:<span style="color: #0000ff"> relative</span>;<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 120px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">background-color</span>:<span style="color: #0000ff"> yellow</span>;}<span style="color: #800000">
#abs2</span>{<span style="color: #ff0000">position</span>:<span style="color: #0000ff"> absolute</span>;<span style="color: #ff0000">top</span>:<span style="color: #0000ff"> 0</span>;}<span style="color: #800000">
img</span>{<span style="color: #ff0000">float</span>:<span style="color: #0000ff">left</span>}<span style="color: #800000">
#img1</span>{<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>}<span style="color: #800000">
#img2</span>{<span style="color: #ff0000">width</span>:<span style="color: #0000ff"> 50px</span>;<span style="color: #ff0000">height</span>:<span style="color: #0000ff"> 50px</span>}

 

     其中，绝对定位元素的left将被设为定值，而width根据“恰当收放”的原则，它的最大值应该是行内子元素宽度之和，最小值应该是子元素中宽度最大者的宽度值，而right的值情况有一点复杂，因为默认情况下，块级元素是垂直排列而行内元素都是一个挨着一个（中间的缝隙可以用：float:left清除）从左向右排列，且中间没有换行符。所以行内元素放在绝对定位的块级元素内作为元素内容宽度过宽时，会由于其行内元素的特点将内容撑开一直到其包含块内容区右边界（从左向右读），因此当行内子元素（即绝对元素的内容）受限出现折行时right的值为0，式1-1便简化为如下：

 

                                           绝对定位元素div#abs的 left+width = 包含块div#rel的 width

 

     当然这种情况应该是在left设定值在一定范围内的前提下（因为宽度没有设置，是auto的），那么如何确定这个范围呢？当绝对定位元素的宽度刚好等于其最小值和最大值时，利用上面的公式求出left的范围设置在（包含块width-最大绝对定位元素width）~（包含块width-最小绝对定位元素width）之间时，绝对定位元素的宽度是受left值影响的，可以通过上面的公式求出当left为某一特定值时的绝对定位元素的width。

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

絶対配置要素 div#abs left+width+right = ブロックを含む div#rel width

3. 要約すると、前提条件の下では次のようになります:

1) 絶対位置の要素がブロックレベルの要素をラップする場合、その幅の値は常に子要素の中で最大の幅の値と等しくなります。

2) インライン要素が絶対配置要素でラップされている場合、幅の最大値はサブ要素の幅の合計であり、最小値はサブ要素の最大幅の値です。幅の値に影響を与える左の間隔を最初に見つけてから、それを含めるのに使用する必要があります。ブロックの幅を見つけるには、ブロックの左の幅の値を使用します。

5. 概要

了 あまりに回転するのは実際には真実です。絶対位置決め要素の幅に問題があるのではないかと心配な場合は、幅を固定値に設定するのが最善です。ルール 1 によれば、4 つはないからです。オフセット属性がすべて設定されているという前提では、明示的な幅の値が有効ですが、実際の環境では要素の配置に幅と高さの設定が必ずしも必要ではないため、影響要因を理解する必要があります。幅と高さは、いくつかの問題に遭遇するのに役立ちます。効果の表示に関する質問の方が役立ちます。テクノロジーに関するブログを書くのはこれが初めてです。まず、レビューしてくれたエレガントなボーイフレンドに心からの感謝の意を表したいと思います。また、オライリー シリーズ「The Definitive Guide」の著者にも感謝したいと思います。 to CSS, Third Edition」および関係スタッフ、この記事の内容の大部分は、この書籍を参照し、独自の理解に基づいて書かれています。この最初の投稿に問題がある場合は、批判と修正をお願いします。よろしくお願いします。ありがとうございます〜