Heim >Web-Frontend >CSS-Tutorial >Die Auswirkungen der CSS3-Transformation auf den HTML-Dokumentfluss
Die Auswirkungen der CSS3-Transformation auf den HTML-Dokumentfluss
- 高洛峰Original
- 2017-02-09 11:27:331759Durchsuche
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);
}
Aber in vielen Fällen führt es zu „Anormalitäten“ im Dokumentenfluss auf HTML-Ebene.
W3C-Spezifikation hat die folgende Beschreibung:
bedeutet: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.
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
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 . 标准文档流
und position verwenden, um es vom Dokumentenfluss zu trennen, wird ein anderes Konzept der Seite float generiert. (Zu weit weg...) 层级
<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>Klicken Sie hier, um das Beispiel anzuzeigen
dom-Element Das Standardpositionierungsattribut ist
, was auch die Standardpositionierungsmethode für Standarddokumentflüsse ist. position: static;
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;
nicht das, was jeder als Bildschirm bezeichnet, sondern ein HTML-Objekt von position: fixed;. Im Allgemeinen generiert eine Seite (viewport) ein Ansichtsfenster. document.documentElement
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;
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
. 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
-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>
, 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 erstaunlichAus „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);
}
Aber in vielen Fällen führt es zu „Anormalitäten“ im Dokumentenfluss auf HTML-Ebene.
W3C-Spezifikation hat die folgende Beschreibung:
bedeutet: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.
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
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
positionTransformation ändert das Standardpositionierungsattribut float层级Der Beispielcode lautet wie folgt:
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>, 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 (
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
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
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
<video>Zusammenfassung
Tatsächlich passiert die obige Situation nicht nur bei
, sondern jeder Dom erzeugt nach dem Hinzufügen voneinen 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