Die Auswirkungen der CSS3-Transformation auf den HTML-Dokumentfluss-CSS-Tutorial-php.cn

HTML ist immer so toll

Aus „Hardware Acceleration“

Eine Notiz zu Beginn des Jahres, zusammengestellt in meiner Freizeit.

In vielen Online-Artikeln wird empfohlen, die Hardwarebeschleunigung des Browsers zu aktivieren, um die Seitenrendergeschwindigkeit und die Animationsflüssigkeit zu verbessern. Dies ist für viele Leute fast zu einer Standardkonfiguration für die Seitenproduktion geworden, unabhängig davon, ob sie tatsächlich nützlich ist oder nicht:

    html，body {
        transform: translate3d(0,0,0);
    }

Nach dem Login kopieren

Aber in vielen Fällen führt es zu „Anormalitäten“ im Dokumentenfluss auf HTML-Ebene.
W3C-Spezifikation hat die folgende Beschreibung:

Im HTML-Namespace führt jeder andere Wert als „none“ für die Transformation zur Erstellung sowohl eines Stapelkontexts als auch eines enthaltenden Blocks Das Objekt fungiert als enthaltender Block für fest positionierte Nachkommen.

bedeutet:

In HTML gibt es keine weitere Transformation als
die Transformation eines DOM, das sowohl ein gestapeltes Objekt als auch ein Containerblock ist . Es macht keinen Sinn mehr. transformDieser Objekttyp spielt auch die Rolle eines
(hauptsächlich absoluten/festen) Nachkommenelementcontainers. positioned

. . . Meine Übersetzungsfähigkeiten sind begrenzt, und diejenigen, die es nicht verstehen, sind möglicherweise noch verwirrter, nachdem sie diesen Satz unten gelesen haben.

Standarddokumentfluss

Die DOM-Elemente auf der Seite sind von oben nach unten und von links nach rechts entsprechend der Reihenfolge ihrer Tag-Positionen in HTML angeordnet

Ich glaube, diese grundlegende Definition ist bereits jedem bekannt. Doch wie lässt sich das in die Praxis umsetzen?

Wenn Sie viele

Elemente auf der Seite platzieren, werden diese ordentlich display: inline-blockoben-> unten links-> rechts angeordnet. Dies ist die grundlegende Verkörperung von . 标准文档流

Wenn Sie Attribute wie

und position verwenden, um es vom Dokumentenfluss zu trennen, wird ein anderes Konzept der Seite float generiert. (Zu weit weg...) 层级

Transformation ändert das Standardpositionierungsattribut

Der Beispielcode lautet wie folgt:

    <body>
        <header style="position: fixed; top: 0; width: 100%; background: red;">header</header>
        <p style="height: 2000px;"></p>
        <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer>
    </body>

Nach dem Login kopieren

Klicken Sie hier, um das Beispiel anzuzeigen

dom-Element Das Standardpositionierungsattribut ist

, was auch die Standardpositionierungsmethode für Standarddokumentflüsse ist. position: static;

Im Beispiel werden die Kopf- und Fußzeile immer oben und unten auf dem Bildschirm platziert, egal wie p nach oben und unten scrollt.

Aber wie eingangs erwähnt, fügen Sie ein

zu body oder html hinzu, und wenn Sie es erneut versuchen, werden Sie feststellen, dass die beiden Elemente des ursprünglichen transform: translate3d(0,0,0); nicht mehr gehorchen. Während der Bildschirm scrollt. position: fixed;

Eigentlich ist das Referenzobjekt von

nicht das, was jeder als Bildschirm bezeichnet, sondern ein HTML-Objekt von position: fixed;. Im Allgemeinen generiert eine Seite (viewport) ein Ansichtsfenster. document.documentElement

Sie können

verwenden, um die tatsächliche Höhe des Ansichtsfensters anzuzeigen, in dem die Elemente von document.documentElement.clientHeight positioniert sind, indem Sie dieses als Container verwenden. Nach dem Hinzufügen des fixed-Attributs zum

Body (oder HTML) wird das gesamte transform DOM entsprechenden Transformationen unterzogen, aber das „Ganze“ bezieht sich zu diesem Zeitpunkt nur auf die Standarddokumentflusselemente unter dem Body . Für diese Das Element body / position: absolute; wurde aus dem Dokumentfluss, zu dem der Körper gehört, getrennt, sodass der entsprechende Transformationseffekt nicht auf natürliche Weise durch die Transformation des Körpers erzielt werden kann. position: fixed;

Um entsprechende Änderungen an diesem DOM-Typ vorzunehmen, generiert der Browser zu diesem Zeitpunkt ein neues Ansichtsfenster. Dieses Ansichtsfenster dient als Container für die Positionierung von Elementen und reagiert auf den

Transformationseffekt von der Körper, wodurch ermöglicht wird, dass auch die inneren transform Elemente, die aus dem Dokumentenfluss ausbrechen, transformiert werden können. positioned

Dieses Ansichtsfenster hat erhebliche Auswirkungen auf die Positionierung von

. Wenn es synchron mit dem „ursprünglichen“ Dom scrollt, rollt es mit dem position: fixed;-Element, was so etwas wie fixed erzeugt Der seltsame Effekt : Das Element absolute

scheint zu fixed zu werden und befindet sich in einem „unsichtbaren“ Container mit der gleichen Größe wie absolute. document.documentElement

Erweiterte Situation

Auf einigen Mobilgeräten (oder APPs) ist die Wiedergabe des

-Tags standardmäßig mit harter Dekodierung aktiviert. Zu diesem Zeitpunkt tritt auch das oben genannte Phänomen auf. und das Video „schwebt“. „Auf der Seite scrollt es nicht normal mit den Seitenelementen.“ <video>

Eine ähnliche Situation tritt auch bei einigen mobilen Browsern niedrigerer Versionen auf. Sie können versuchen, das Problem gemäß dieser Idee zu lösen.

Zusammenfassung

Tatsächlich passiert die obige Situation nicht nur bei

, sondern jeder Dom erzeugt nach dem Hinzufügen von body einen Viewport-ähnlichen Effekt. Wenn Sie interessiert sind, können Sie es versuchen Es. transform

Zitat:
http://www.php.cn/

html Immer so erstaunlich

Aus „Hardware Acceleration“

Eine Notiz vom Anfang des Jahres, zusammengestellt in meiner Freizeit.

In vielen Online-Artikeln wird empfohlen, die Hardwarebeschleunigung des Browsers zu aktivieren, um die Seitenwiedergabegeschwindigkeit und die Animationsflüssigkeit zu verbessern. Dies ist für viele Leute fast zur Standardkonfiguration bei der Seitenproduktion geworden, unabhängig davon, ob sie tatsächlich nützlich ist oder nicht:

    html，body {
        transform: translate3d(0,0,0);
    }

Nach dem Login kopieren

Aber in vielen Fällen führt es zu „Anormalitäten“ im Dokumentenfluss auf HTML-Ebene.
W3C-Spezifikation hat die folgende Beschreibung:

Im HTML-Namespace führt jeder andere Wert als „none“ für die Transformation zur Erstellung sowohl eines Stapelkontexts als auch eines enthaltenden Blocks Das Objekt fungiert als enthaltender Block für fest positionierte Nachkommen.

bedeutet:

. . . Meine Übersetzungsfähigkeiten sind begrenzt, und diejenigen, die es nicht verstehen, sind möglicherweise noch verwirrter, nachdem sie diesen Satz unten gelesen haben.

Standarddokumentenfluss

Die DOM-Elemente auf der Seite sind von oben nach unten und von links nach rechts entsprechend der Reihenfolge ihrer Tag-Positionen in HTML angeordnet

Ich glaube, diese grundlegende Definition ist bereits jedem bekannt. Doch wie lässt sich das in die Praxis umsetzen?

Wenn Sie viele

Elemente auf der Seite platzieren, werden diese ordentlich display: inline-blockoben-> Dies ist die grundlegende Verkörperung von . Wenn Sie Attribute wie und 标准文档流 verwenden, um es vom Dokumentenfluss zu trennen, wird ein anderes Konzept der Seite

generiert. (Zu weit weg...)

positionTransformation ändert das Standardpositionierungsattribut float层级Der Beispielcode lautet wie folgt:

Klicken Sie hier, um das Beispiel anzuzeigen

dom-Element Das Standardpositionierungsattribut ist

    <body>
        <header style="position: fixed; top: 0; width: 100%; background: red;">header</header>
        <p style="height: 2000px;"></p>
        <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer>
    </body>

Nach dem Login kopieren

, was auch die Standardpositionierungsmethode für Standarddokumentflüsse ist.

Im Beispiel werden Kopf- und Fußzeile immer oben und unten auf dem Bildschirm platziert, egal wie p nach oben und unten scrollt.

position: static;Aber wie anfangs erwähnt, fügen Sie ein

oder

hinzu, und wenn Sie es noch einmal versuchen, werden Sie feststellen, dass die beiden Elemente des ursprünglichen

nicht mehr gehorchen. Während der Bildschirm scrollt. bodyhtmlEigentlich ist das Referenzobjekt von transform: translate3d(0,0,0); nicht das, was jeder als Bildschirm bezeichnet, sondern ein HTML-Objekt von position: fixed;. Im Allgemeinen generiert eine Seite (

) ein Ansichtsfenster.

position: fixed;Sie können viewport verwenden, um die tatsächliche Höhe des Ansichtsfensters anzuzeigen, in dem die Elemente von document.documentElement positioniert sind, indem Sie dieses als Container verwenden. Nach dem Hinzufügen des

-Attributs zum

document.documentElement.clientHeightBody (oder HTML) wird das gesamte fixed DOM entsprechenden Transformationen unterzogen, aber das „Ganze“ bezieht sich zu diesem Zeitpunkt nur auf die Standarddokumentflusselemente unter dem Body . Für diese Das Element

wurde aus dem Dokumentfluss, zu dem der Körper gehört, getrennt, sodass der entsprechende Transformationseffekt nicht auf natürliche Weise durch die Transformation des Körpers erzielt werden kann. transformbodyUm entsprechende Änderungen an diesem DOM-Typ vorzunehmen, generiert der Browser zu diesem Zeitpunkt ein neues Ansichtsfenster. Dieses Ansichtsfenster dient als Container für die Positionierung von Elementen und reagiert auf den position: absolute; Transformationseffekt von der Körper, wodurch ermöglicht wird, dass auch die inneren position: fixed; Elemente, die aus dem Dokumentenfluss ausbrechen, transformiert werden können.

Dieses Ansichtsfenster hat erhebliche Auswirkungen auf die Positionierung von transform. Wenn es synchron mit dem „ursprünglichen“ Dom scrollt, rollt es mit dem positioned-Element, was so etwas wie

erzeugt Der seltsame Effekt : Das Element

position: fixed;fixed scheint sich in absolute zu ändern und befindet sich in einem „unsichtbaren“ Container mit der gleichen Größe wie

fixedErweiterte Situationabsolutedocument.documentElementAuf einigen Mobilgeräten (oder APPs) ist die Wiedergabe des

Eine ähnliche Situation tritt auch bei einigen mobilen Browsern niedrigerer Versionen auf. Sie können versuchen, das Problem gemäß dieser Idee zu lösen.

<video>Zusammenfassung

Tatsächlich passiert die obige Situation nicht nur bei

, sondern jeder Dom erzeugt nach dem Hinzufügen von

einen Viewport-ähnlichen Effekt. Wenn Sie interessiert sind, können Sie es versuchen Es.

Weitere verwandte Artikel über die Auswirkungen der CSS3-Transformation auf den HTML-Dokumentfluss finden Sie auf der chinesischen PHP-Website! bodytransform