Die Auswirkung der absoluten Positionierung auf die Elementbreite

1. Ursache des Problems

Wenn Sie Ihren eigenen Karussell-Bildwechsel schreiben, wird beim Verschieben des vorherigen Bildes ein Leerzeichen dahinter angezeigt. Das zweite Bild wird erst angezeigt, wenn alle vorherigen Bilder herausgeschoben werden. Als das Problem zum ersten Mal auftrat, habe ich online gesucht und festgestellt, dass einige Leute sagten, dass die Timer-Animation diese Situation verursachen könnte. Deshalb habe ich den Timer im Code-Debugging auskommentiert, sodass das Bild nach nur einem Schritt angehalten wurde Dahinter befand sich immer noch ein Leerzeichen, also war ich mir sicher, dass es sich nicht um ein Timer-Problem handelte. Also habe ich das Box-Modell überprüft und festgestellt, dass die Breite des Containers div#main, der das Bild umschließt, nicht der Summe der Breiten der sechs Bilder entspricht, die ich idealerweise haben wollte. Es stellte sich heraus, dass ich die Breite des Containers nicht explizit festgelegt habe div#main. Aber hier kommt das Problem, ohne die Behälterbreite explizit festzulegen. Könnten Sie rational denken, dass die Breite des Behälters nicht an die Füllung seines Inhalts angepasst werden sollte? Aufgrund des oben genannten Phänomens lautet die Antwort natürlich nein. Man kann aber auch sagen, dass dies nicht in allen Fällen der Fall ist, da die Positionierung tatsächlich auch einen Einfluss auf die Breite des Behälters hat. Lassen Sie uns die Beziehung zwischen der Größe und der Platzierung absolut positionierter Elemente diskutieren.

2. Blöcke enthalten

Lassen Sie uns zunächst das Grundkonzept des Einschließens von Blöcken (Positionierungskontext) überprüfen:

1. Der anfängliche enthaltende Block (der enthaltende Block des Wurzelelements) wird vom Benutzeragenten bestimmt.

2. Das schwebende Element, das den Block enthält, wird als das nächste Vorfahrenelement auf Blockebene definiert.

3. Der enthaltende Block eines relativ positionierten oder statisch positionierten Elements wird durch die Inhaltsgrenze des nächstgelegenen Blockebenenfelds, der nächsten Tabellenzelle oder des Inline-Blockfeld-Vorfahrenelements (jeglichen Typs) gebildet. .

4. Das absolut positionierte Element, das den Block enthält, wird auf das nächstgelegene positionierte Vorgängerelement (jeglichen Typs) gesetzt, das nicht statisch zu den Randgrenzen (für übergeordnete Elemente auf Blockebene) oder Inhaltsgrenzen (für übergeordnete Inline-Elemente) ist Elemente).

3. Breite und Versatz

Im Allgemeinen hängen die Größe und Position eines Elements von seinem enthaltenden Block ab. Positionierung bedeutet, dass jede Randgrenze eines Elements relativ zur entsprechenden Seite seines enthaltenden Blocks (innerer Rand und angrenzende Randseite) versetzt ist, was sich auf alles im Element auswirkt (Ränder, Rahmen, Innenabstand, Inhalt), der verschoben wird. Daher gibt es für ein positioniertes Element die folgende Gleichung (die folgenden Berechnungen basieren auf dieser Gleichung):

left margin-left border-left-width padding-left width padding-right border-right-width margin-right right=Breite des enthaltenden Blocks (Formel 1-1)

Wenn die Breite und Höhe eines Elements undefiniert sind, werden ihre Werte demnach durch die Positionierung beeinflusst. Bei positionierten Elementen sollte je nach Situation festgelegt werden, ob Breite und Höhe festgelegt werden müssen. Beachten Sie die Regeln zur Bestimmung der Breite und Höhe der folgenden Situationen:

1. Wenn die Offset-Attribute oben, links, unten und rechts alle bestimmt sind, aber die Ränder, Innenränder und Ränder nicht festgelegt sind, sind die Werte unabhängig davon, ob Breite und Höhe explizit festgelegt sind bestimmt durch die Offset-Attribute; wenn hingegen Ränder oder Abstand festgelegt sind (zählt auch automatisch), sind die Höhe und Breite des Rahmens die explizit festgelegten Werte. Wenn Breite und Höhe nicht explizit festgelegt sind, sind sie es wird durch das Offset-Attribut bestimmt.

2. Verhalten der horizontalen Achse für nicht ersetzte Elemente:

1) Wenn links, Breite und rechts alle automatisch sind und keine inneren und äußeren Ränder oder Ränder festgelegt sind, befindet sich die linke Seite des Elements nach der Berechnung an ihrer statischen Position (von links nach rechts gelesen). und die Breite ist „richtig erweitert“. Die Gleichung rechts ist der verbleibende horizontale Abstand;

2) Wenn alle Werte in der Gleichung feste Werte sind und das Element „überbeschränkt“ ist, wird das Recht gemäß der obigen Formel zurückgesetzt;

3) Wenn in der obigen Gleichung nur ein Attributwert automatisch ist, wird dieser Attributwert zurückgesetzt, um die Gleichung zu erfüllen, wenn das Element „überbeschränkt“ ist;

4) Die Regeln für die vertikale Achse sind ähnlich, aber bitte beachten Sie, dass nur die Oberseite eine statische Position einnehmen kann, die Unterseite nicht.

3. Für Ersatzelemente (beachten Sie, dass es hier kein Konzept einer „richtigen Ausdehnung“ gibt, da das Ersatzelement eine inhärente Breite und Höhe hat):

1) Überprüfen Sie zunächst, ob seine Breite (Höhe) explizit deklariert ist. Andernfalls wird er durch die tatsächliche Größe (Breite und Höhe) des Elementinhalts bestimmt

2) Schauen Sie noch einmal nach links. Wenn oben „Auto“ ist, ersetzen Sie es durch eine statische Position

3) Wenn die Werte für links und unten immer noch automatisch sind, stellen Sie die automatische Einstellung des Randes auf 0 ein. Wenn sie nicht auf 0 eingestellt sind, stellen Sie sie auf links und rechts und gleich oben und unten ein.

4) Wenn danach nur noch ein Autowert übrig ist, ähnelt dieser dem Nicht-Ersatzelement und der Autowert wird gemäß der Gleichung zurückgesetzt.

5) Wenn ein Element „übermäßig eingeschränkt“ ist, ignoriert der Benutzeragent die rechten (von links nach rechts gelesenen) und unteren Elemente wie bei nicht ersetzten Elementen.

Das Obige ist eine Analyse der Einflussfaktoren der tatsächlich angezeigten Breite und Höhe eines absolut positionierten Elements. Wenn Sie feststellen, dass der Anzeigeeffekt der Benutzeroberfläche nicht Ihren Erwartungen entspricht, können Sie eine Analyse aus der oben genannten Perspektive in Betracht ziehen Prüfen Sie, ob Sie die Breite des Elements oder den Wert einer der anderen oben genannten Eigenschaften neu bestimmen müssen.

4. Analyse einer häufigen Situation

Lassen Sie uns nun die tatsächlichen Beispiele für Breiten- und Höhenprobleme analysieren, auf die ich im Projekt gestoßen bin. Die hier diskutierte hypothetische Situation ist: Das äußerste div#rel mit Breite und Höhe ist auf relative Positionierung eingestellt, und sein untergeordnetes div#abs setzt links nur auf einen festen Wert, ohne die Breite festzulegen (vorausgesetzt, es gibt keine inneren und äußeren Ränder und Rahmen). ), div#abs Der Innenraum enthält verschiedene Arten von Elementen.

1. Lassen Sie uns zunächst den Fall besprechen, in dem die innerste Ebene mit Elementen auf Blockebene umschlossen ist. Der Code lautet wie folgt:

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="rel1"</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">="abs1"</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">="box1"</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: #ff0000">id</span><span style="color: #0000ff">="box2"</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: #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">
#rel1</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">
#abs1</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: #ff0000">left</span>:<span style="color: #0000ff"> -15px</span>}<span style="color: #800000">
#box1</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: #ff0000">background-color</span>:<span style="color: #0000ff"> red</span>}<span style="color: #800000">
#box2</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: #ff0000">background-color</span>:<span style="color: #0000ff"> blue</span>}

Wie aus dem Code ersichtlich ist, setzen wir den Rand und die Polsterung des absolut positionierten Elements auf 0 und es gibt keinen Rand. Dann wird die obige Gleichung 1-1 vereinfacht zu:

                                        　绝对定位元素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。

Wenn der Wert von links außerhalb des oben genannten Bereichs liegt, hat die Breite des absolut positionierten Elements den Extremwert erreicht und wird von Änderungen in links nicht mehr beeinflusst. Zu diesem Zeitpunkt ist rechts nicht mehr 0 werden automatisch Berechnungen durchgeführt, um die folgende Formel zu erfüllen:

Absolutes Positionierungselement div#abs left width right = enthält width

                                                                                3. Zusammenfassend unter der Prämisse der Annahme:

1) Wenn ein absolut positioniertes Element ein Element auf Blockebene umschließt, ist sein Breitenwert immer gleich dem Wert der größten Breite unter den untergeordneten Elementen.

2) Wenn ein Inline-Element von einem absolut positionierten Element umschlossen wird, ist der maximale Breitenwert die Summe der Breiten der Unterelemente und der minimale Wert der Wert der größten Unterelementbreite und des Das linke Intervall, das sich auf den Breitenwert auswirkt, muss vor der Verwendung zuerst gefunden werden. Es enthält den Breiten-Links-Wert des Blocks, um seine Breite zu ermitteln.

5. Zusammenfassung

Nachdem ich so viel im Kreis gesagt habe, ist es eigentlich die gleiche Wahrheit. Wenn Sie sich Sorgen über die Breite eines absolut positionierten Elements machen, ist es am besten, explizit einen festen Breitenwert dafür festzulegen, denn gemäß Regel 1, ohne Einstellung Unter der Voraussetzung, dass alle vier Offset-Attribute festgelegt sind, ist der explizite Breitenwert wirksam. In der tatsächlichen Umgebung ist das Festlegen von Breite und Höhe jedoch nicht unbedingt erforderlich, um Elemente zu positionieren. Daher ist es erforderlich, die Einflussfaktoren von Breite und Höhe zu verstehen hilfreich, wenn auf einige Fragen zur Effektanzeige stoßen, die möglicherweise hilfreicher sind. Dies ist das erste Mal, dass ich einen Technologie-Blog schreibe. Zunächst möchte ich meinem eleganten Freund meinen aufrichtigen Dank aussprechen, der ihn für mich rezensiert hat. Außerdem möchte ich dem Autor der O'Reilly-Reihe „The Definitive Guide“ danken zu CSS, Dritte Ausgabe“ und Für die zuständigen Mitarbeiter wurde ein großer Teil des Inhalts dieses Artikels unter Bezugnahme auf das Buch und auf der Grundlage ihres eigenen Verständnisses geschrieben. Wenn in diesem ersten Beitrag Probleme auftreten, kritisieren und korrigieren Sie mich bitte . Vielen Dank~