Dieses Mal bringe ich Ihnen die neuesten Front-End-Interviewfragen im Jahr 2018. Wir wissen, dass Interviews ein unverzichtbarer Bestandteil der Front-End-Arbeit sind. Dieses Mal werden die häufigsten Front-End-Interviewfragen sortiert und zusammengefasst, um Ihnen zu helfen durch das Front-End-Interview. Großes Problem. Werfen wir einen Blick darauf.
[Verwandte Empfehlungen: Front-End-Interviewfragen(2020)]
1. Beschreiben Sie, wie Z-Index und Overlay-Kontext gebildet werden.
Schauen wir uns zunächst die Gründe für die Bildung des Overlay-Kontexts in CSS an:
1 Negativer Rand Wenn der Rand ein negativer Wert ist, wird das Element entsprechend nach außen versetzt die Referenzlinie. Die Referenzlinie von margin-left/margin-top ist das Element links/das Element darüber (wenn es kein Geschwisterelement gibt, ist es die innere linke/obere Innenseite des übergeordneten Elements), margin-right Die Referenzlinie für margin-bottom ist die rechte Seite des Randes/Unterseite des Randes des Elements selbst. Im Allgemeinen können negative Ränder für das Layout verwendet werden, aber wenn sie nicht richtig berechnet werden, können sich Elemente überlappen. Die Stapelreihenfolge wird durch die Position der Elemente im Dokument bestimmt, wobei die Elemente später oben erscheinen.
2. Relative/absolute/feste Positionierung der Position Wenn der Positionswert für ein Element auf relativ/absolut/fest eingestellt ist, kann sich der Versatz des Elements überlappen und das Z-Index-Attribut wird aktiviert. Der Z-Indexwert kann die Stapelreihenfolge der positionierten Elemente in der Richtung senkrecht zum Anzeigebildschirm (Z-Achse) steuern. Wenn sich Elemente mit einem großen Wert überlappen, liegen sie über Elementen mit einem kleinen Wert.
Z-Index-Attribut Z-Index kann nur für Elemente wirksam sein, deren Positionsattributwert relativ, absolut oder fest ist.
Grundprinzip: Der Z-Indexwert kann die Stapelreihenfolge (Stapelreihenfolge) der positionierten Elemente in der Richtung senkrecht zum Anzeigebildschirm (Z-Achse) steuern. Wenn sich Elemente mit einem großen Wert überlappen, werden sie angezeigt über Elementen mit einem kleinen Wert.
Relativität verwenden: Der Z-Index-Wert bestimmt nur die Stapelreihenfolge der untergeordneten Geschwisterelemente im selben übergeordneten Element. Der Z-Index-Wert des übergeordneten Elements (falls vorhanden) definiert die Stapelreihenfolge für die untergeordneten Elemente (die CSS-Version des Stapelns „Pin Dad“).
Wenn das übergeordnete Element, das den Z-Index-Wert enthält, nicht durch Aufwärtsverfolgung gefunden werden kann, kann es als freies Z-Index-Element betrachtet werden. Es kann das Element mit den Geschwistern des übergeordneten Elements oder einem anderen Element positionieren Freie Positionen werden mit ihren Z-Index-Werten verglichen, um ihre Stapelreihenfolge zu bestimmen. Wenn die Z-Index-Werte der Geschwisterelemente gleich sind, wird die Stapelreihenfolge durch die Position der Elemente im Dokument bestimmt, wobei die später erscheinenden Elemente oben liegen. Wenn Sie also feststellen, dass ein Element mit einem größeren Z-Index-Wert durch ein Element mit einem kleineren Wert verdeckt wird, überprüfen Sie bitte zuerst die Beziehung zwischen den Dom-Knoten zwischen ihnen. Dies liegt wahrscheinlich daran, dass für den übergeordneten Knoten die Aktivierung und der Z-Index festgelegt sind . Die Position des Werts positioniert das Element.
2. Bitte beschreiben Sie BFC (Block Formatting Context) und wie es funktioniert.
BFC (Block Formatting Context) bedeutet wörtlich übersetzt „Formatierungsbereich auf Blockebene“.
3. Listen Sie verschiedene Techniken zum Löschen von Floating auf und weisen Sie auf deren anwendbare Anwendungsszenarien hin.
Erklären wir zunächst einmal, warum wir Floats löschen müssen. Wenn alle Elemente in einem Container schwebend sind, gibt es keinen Inhalt, der sie für den äußeren Container offen hält, da das Schweben die Elemente vom normalen Dokumentfluss trennt. Die Hintergrundeinstellungen können nicht angezeigt werden, und die Randeinstellungen können nicht angezeigt werden . Methoden zum Löschen von Floats:
1. Neue Elemente hinzufügen und löschen: beides
例如： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div>
.clear{clear:both; height: 0; line-height: 0; font-size: 0}Nach dem Login kopieren
Vorteile: Einfach, weniger Code, gute Browserunterstützung, nicht anfällig für seltsame Probleme. Nachteile Das wird es Fügen Sie viele ungültige Layouts hinzu, aber dies ist eine häufiger verwendete Methode zum Löschen von Floats.
2. Übergeordnetes Div definiert Überlauf: automatisch oder versteckt
//这里添加了一个class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 }Nach dem Login kopieren
Prinzip: Breite oder Zoom: 1 muss definiert werden, und Gleichzeitig kann die Höhe nicht definiert werden, wenn das Überlaufattribut zum Löschen von Floats verwendet wird. Das Überlaufattribut hat drei Attributwerte: versteckt, automatisch und sichtbar. Wir können versteckte und automatische Werte verwenden, um Floats zu löschen. Denken Sie jedoch daran, keine sichtbaren Werte zu verwenden. Wenn dieser Wert verwendet wird, wird der Effekt des Löschens von Floats nicht erzielt.
Vorteile: Einfach, weniger Code, gute Browserunterstützung. Nachteile: Bei Verwendung von „Auto“ wird eine Bildlaufleiste angezeigt, wenn die interne Breite und Höhe das übergeordnete Div überschreiten, und bei Verwendung von „Hidden“ wird sie ausgeblendet
3. Prinzip der After-Methode: Verwenden Sie :after und :before, um zwei Elementblöcke innerhalb des Elements einzufügen, um den Effekt des Löschens von Floats zu erzielen. Das Implementierungsprinzip ähnelt der Methode „clear:both“, außer dass:clear ein div.clear-Tag in HTML einfügt, während diese Methode ihre Pseudoklasse „clear:after“ verwendet, um einen ähnlichen Effekt wie „div.clear“ innerhalb des Elements hinzuzufügen.
Werfen wir einen Blick auf die spezifische Verwendung:
<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}Nach dem Login kopieren
wobei sich clear:both; auf das Löschen aller Floats bezieht: '.'; opera/IE8 darf nicht fehlen, wobei content() einen Wert haben oder leer sein kann. Die Funktion von „visibility:hidden;“ besteht darin, dem Browser zu ermöglichen, es zu rendern, aber nicht anzuzeigen, sodass der Float gelöscht werden kann. Im Allgemeinen wird daher empfohlen, eine Pseudoklassenmethode zu verwenden.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Zehn aktuelle Front-End-Interviewfragen im Jahr 2018
Neun aktuelle Front-End-Interviewfragen in 2018
Neueste Front-End-Interviewfragen 2018 8
Das obige ist der detaillierte Inhalt vonNeueste Front-End-Interviewfragen 2018 11. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
