Häufige Fragen zu Front-End-CSS-Interviews

Während sich die epidemische Situation weiter verbessert, haben verschiedene Orte begonnen, die Arbeit schrittweise wieder aufzunehmen. Natürlich gibt es für uns die sogenannten Gold-, Drei-, Silber- und Vier-Job-Hopping-Saisons beginnen gleich. Hier möchte ich einige meiner gesammelten Erfahrungen im Frontend-Bereich teilen, damit ich die Vergangenheit Revue passieren lassen und Neues lernen kann.

Für das Frontend ist ein breites Spektrum an Wissen und Inhalten erforderlich, aber es bleibt das Gleiche, hauptsächlich rund um HTML (5), CSS (less, scss, sass, styus, css3) , js (es5, es6) und mehrere gängige beliebte Frameworks wie Vue, React usw. Kommen wir ohne weitere Umschweife direkt zum Thema.

Themenempfehlung: Zusammenfassung der CSS-Interviewfragen 2020 (aktuell)

1 Nennen Sie einige neue Funktionen von HTML5

Antwort: Die von HTML5 hinzugefügten neuen Funktionen sind insbesondere:

1 Neue semantische/strukturierte Tags, wie Fußzeile, Artikel, main, nav usw.;
Neue Eingabetyptypen und -attribute, wie zum Beispiel: E-Mail, Telefonnummer usw.;
3 🎜>4. Der Unterschied zwischen der neuen Grafik-Tag-SVG-Leinwand
Die neue Multimedia-Tag-Video-Audioquelle
6. Einige aufgegebene Element-Tags, wie zum Beispiel: Schriftart
8. DOCTYPE- und Zeichensatzdeklaration

2. Verwendung von Z-IndexAntwort: Z-Index wird verwendet, um Beschriftungen hierarchisch festzulegen Wenn Sie den Z-Index verwenden, müssen Sie gleichzeitig das Positionsattribut des Etiketts festlegen (z. B. relativ, absolut oder fest). Der Standard-Z-Index des Etiketts ist 0, und Sie können einen negativen Wert festlegen Zahl. Je größer der Wert, desto höher ist er an der Spitze

3. Positionsattribute und Verwendung Antwort: Position ist die Positionierung Attribut von CSS, das hauptsächlich die folgenden unterschiedlichen Attributwerte umfasst. Die Details lauten wie folgt:

absolut

Generieren Sie ein absolut positioniertes Element, das relativ zum ersten übergeordneten Element positioniert ist, anders als die statische Positionierung. Die Position des

-Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

fixed

generiert ein absolut positioniertes Element, positioniert relativ zum Browserfenster. Die Position des

-Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

relative

generiert ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist.

Mit „left:20“ werden also 20 Pixel zur linken Position des Elements hinzugefügt.

statisch

Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (ohne Berücksichtigung der Top-, Bottom-, Left-, Right- oder Z-Index-Deklarationen).

inherit

gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

4. Verwendung von Float Antwort: Das Attribut definiert, in welche Richtung das Element schwebt. In der Vergangenheit wurde diese Eigenschaft immer auf Bilder angewendet, wodurch der Text um das Bild herum umbrochen wurde. In CSS kann jedoch jedes Element schwebend dargestellt werden. Ein schwebendes Element erstellt eine Box auf Blockebene, unabhängig von der Art des Elements. Die Details lauten wie folgt:

Der durch Float verursachte Effekt führt dazu, dass das Element selbst zu einem Element ähnlich dem Inline-Block wird, sodass das umschließende Element seine Höhe ignoriert, dh das übergeordnete Element hat keine Höhe. Beispiel: Festlegen des Felds für die Höhe des untergeordneten Elements: 100 Pixel; Die Höhe des übergeordneten Elements beträgt zu diesem Zeitpunkt ebenfalls 100 Pixel. Der Effekt von float float führt dazu, dass sich das Element in der angegebenen Richtung aus dem Dokumentfluss bewegt, bis seine Außenkante auf die umschließende Box oder einen anderen schwebenden Rand trifft. Das Schweben wirkt sich nur auf die dahinter liegenden Elemente aus. Wenn das übergeordnete Element nicht schwebt, werden alle schwebenden Elemente in einer neuen Zeile angezeigt . Wenn basierend auf dem Zeilenumbruchelement ein schwebendes Element vorhanden ist, dessen Höhe größer als das Zeilenumbruchelement ist, bleibt es beim Bruch des Zeilenumbruchelements durch das höhere Element hängen. 5. Möglichkeiten zum Löschen die Auswirkungen von Float

Antwort: Float verursacht Schäden im Dokumentenfluss. Wenn Sie die Auswirkungen von Float beseitigen müssen, gibt es daher im Allgemeinen mehrere Lösungen:

Für Unterelemente: Fügen Sie nach dem schwebenden Unterelement ein Element hinzu und fügen Sie ein leeres Element hinzu. Der Nachteil besteht darin, dass ein leeres Element willkürlich hinzugefügt wird, was nicht den Codespezifikationen entspricht Legen Sie nach dem übergeordneten Element das Attribut „clear“ fest, lassen Sie jedoch nur die nachfolgenden Elemente normal anzeigen und erweitern Sie nicht die Höhe des übergeordneten Elements: Legen Sie die Höhe für das übergeordnete Element fest, die normal angezeigt werden kann , aber die Skalierbarkeit ist nicht gut, da die Höhe normalerweise durch den Inhalt im Inneren erweitert wird: Legen Sie die Anzeige für das übergeordnete Element fest: Inline-Block, es kann normal angezeigt werden, aber der Rand: Auto des übergeordneten Elements Das Element ist ungültig und Sie werden feststellen, dass zwischen dem oberen und dem unteren Teil eine Lücke besteht: Setzen Sie den Überlauf auf das übergeordnete Element. Es kann normal angezeigt werden, muss jedoch mit der Breite übereinstimmen. andernfalls belegt es standardmäßig eine Zeile. 6. CSS-Animationseigenschaften (z. B. Verwendung von CSS zum Bremsen eines rotierenden Dreiecks)

A: Um ein Dreieck zu erstellen, können Sie die Randattribute direkt auf 0 Pixel festlegen und dann die Farbattribute verschiedener Ränder entsprechend der Breite festlegen des Dreiecks ist auf eine bestimmte Dreiecksfarbe eingestellt oder auf eine Breite von 0 eingestellt. Die anderen beiden Hypotenusen sind auf transparent eingestellt

Die Rotationsanimation beinhaltet zwei Eigenschaften von CSS, nämlich :

1) Übergang: Animationsattribut Sie können vier Werte schreiben, die den Attributnamen der entsprechenden Animation darstellen oder alle direkt festlegen, die Zeit, zu der die Animation abgeschlossen ist (Einheit ist s oder ms), die Änderungskurve der Animation und die Zeit, zu der die Animation beginnt

2) transform: rotation Zu den Attributen gehören hauptsächlich Rotieren (die radikale Rotation umfasst auch rotieren3d, rotierenX, rotierenY, rotierenZ), Übersetzen (es gibt vier in der auf die gleiche Weise), Maßstab (es gibt vier auf die gleiche Weise)

7. Formales Boxmodell und informelles Boxmodell

Antwort: Die Das Box-Modell berechnet hauptsächlich die Breite oder Höhe des Etiketts. Das Standard-Box-Modell umfasst: Rand, Rand, Abstand und die Breite des Inhalts, dh die tatsächliche Breite des Felds = der linke und rechte Rand des Inhalts + der linke und rechte Rand + der linke und rechte Abstand + die tatsächliche Breite des Inhalts; und das Box-Sizing-Attribut wird in CSS3 eingeführt, das die Berechnungsmethode des Standard-Box-Modells ändern kann, insbesondere: Box-Größe festlegen: border -box, die tatsächliche Breite der Box = der linke und rechte Rand des Inhalts + die tatsächliche Breite des Inhalts. Natürlich können Sie die Box-Größe direkt festlegen: content-box, um das normale Standard-Box-Modell wiederherzustellen

8.flex elastisches Layout

Antwort: 1. Stellen Sie das Anzeigeattribut der Box auf Flex oder Line-Flex ein, was sechs entspricht CSS-Attribute, nämlich:

1) Flex-Richtung: Legen Sie die Anordnung der Unterelemente fest (Zeile, Spalte, Zeilenumkehr, Spaltenumkehr)

2) Flex-Warp: Festlegen ob die Unterelemente umwickelt sind (nowarp, warp, warp-reverse)

3) Flex-Flow: Abkürzung für Flex-Direction und Flex-Warp, Standard ist Row Nowarp

4) justify-content: Legt die horizontale Anordnung der untergeordneten Elemente fest. Modus (Flex-Start, Flex-Ende, Mitte, Span-Around, Span-Between)

5) align-items: Legt den vertikalen Modus der untergeordneten Elemente fest (Flex-Start, Flex-Ende, Mitte, Dehnung, Grundlinie)

6) align-content: Legt die Anordnung mehrerer Achsen fest (Flex-Start, Flex-Ende, Mitte, Span-Around, Span- between, stretch)

2 . Das entsprechende Unterelementelement verfügt auch über seine eigenen sechs CSS-Attribute:

1) Reihenfolge: Legen Sie die Anordnungsgewichtung des Elements mit dem größeren fest Wert, desto mehr dahinter

2) Flex-Grow: Legt das Vergrößerungsverhältnis des Elements fest

3) Flex-Shrink: Legt das Schrumpfverhältnis des Elements fest

4) Flex-Basis: Legen Sie den Anteil des Platzes fest, der von der Hauptachse des Elements mit überschüssigem Platz eingenommen wird.

5) Flex: Die Abkürzungen für Flex-Grow, Flex-Shrink und Flex-Basis sind standardmäßig auf 0 1 automatisch eingestellt

6) align-self: Legen Sie die vertikale Anordnung der Unterelemente selbst fest. Der Standardwert sind die align-items der Box. Der Wert von

: warning:: Nach dem Festlegen des Flex Layout, Float, Clear und Vertical-Alignment der untergeordneten Elemente sind ungültig

9.grid Grid-Layout

Antwort: 1. Um das Rasterlayout der Box festzulegen, müssen Sie die Anzeige auf Raster oder Linienraster einstellen, was den folgenden Attributen entspricht:

1) Grid-Template-Columns: Definition Breite jeder Spalte

2) Grid-Template-Rows: Definieren Sie die Höhe jeder Zeile

3) Grid-Row-Gap: Definieren Sie den Abstand zwischen Zeilen

4 ) Grid-Column-Gap : Definieren Sie die Lücke zwischen Spalten

5) Grid-Gap: Definieren Sie die Lückenabkürzung zwischen Zeilen und Spalten

6) Grid-Teamplate-Areas: Definieren Sie einen Bereich, der aus mehreren Zellen besteht

7) Grid-Auto-Flow: Definieren Sie die Reihenfolge der Containeranordnung

8) justify-items: Definieren Sie die horizontale Anordnungsreihenfolge des Inhalts der Unterelemente

9 ) align-items: Definieren Sie die vertikale Reihenfolge des Inhalts von Unterelementen

10) place-items: Definieren Sie die Abkürzung der horizontalen und vertikalen Reihenfolge des Inhalts von Unterelementen

11) justify-content: Definieren Sie die horizontale Anordnungsreihenfolge des Containers (Raster)

12) align-content: Definieren Sie die vertikale Anordnungsreihenfolge des Containers (Raster)

13) place- Inhalt: Definieren Sie die horizontale Summe des Containers. Die Abkürzung für die vertikale Anordnungsreihenfolge

2. Zu den Attributen untergeordneter Elemente gehören:

1) Grid-Column-Start: Die Position, an der die Spalte beginnt

2) Grid-Column-Ende: Die Position, an der die Spalte endet

3) Grid-Row-Start: Die Position, an der die Zeile beginnt

4) Grid- Zeilenende: Die Position, an der die Zeile endet

5) Rasterspalte: Start- und Endposition der Spalte

6) Rasterzeile: Start- und Endposition der Zeile

7) Grid-Bereich: Definieren Sie den Bereich, in dem das Element platziert wird

8) justify-self: Definieren Sie die eigene horizontale Anordnung des Elements

9) align-self: Definieren Sie die eigene Vertikale des Elements Anordnung

10) place-self: Definieren Sie die eigene horizontale und vertikale Anordnung des Elements

: Warnung:: Bei Einstellung auf Rasterlayout werden Float, Inline-Block, Tabellenzelle und Spalte angezeigt -* Attribute der untergeordneten Elemente sind alle ungültig

10. Gemeinsame Zentrierungslösungen

Antwort:

1 Inline-Elemente zentrieren: Verwenden Sie text-align direkt: center

2. Inline-Elemente werden vertikal zentriert: Vertical-align: middle und setzen Sie die Zeilenhöhe des übergeordneten Elements auf die Höhe des übergeordneten Elements

3. Elemente mit fester Breite werden horizontal zentriert mit: magin: 0 auto

4. Flexibles elastisches Layout: Justify-content: horizontal zentrieren, align-items: vertikal zentrieren

6 : Anzeige: Tabellenzelle, vertikale Ausrichtung: Mitte

7. Vertikale Zentrierung durch Pseudoelement festlegen: Ein Pseudoelement des übergeordneten Elements festlegen und auf „Inline-Block“ sowie „Vertikale Ausrichtung“ festlegen : Mitte

8. Wenn die Höhe bestimmt ist: absolute Positionierung + Abstand zur vertikalen Mitte

9. Wenn die Höhe unsicher ist: absolute Positionierung + Transformation, insbesondere: Legen Sie die Elemente fest, die benötigt werden vertikal zentriert sein als: Position: absolut, oben: 50 %, transformieren: translatorY(-50 %)

10. Vertikal zentriert über Flex-Dauer: Spalte: Anzeige: Flex, Flex-Dauer: Spalte, Ausrichtung -Inhalt: Mitte

Horizontale und vertikale Zentrierungsmethode: 1. Die Höhe des übergeordneten Elements sowie die Höhe und Breite sind bekannt des untergeordneten Elements sind fest (die Höhe darf nicht festgelegt sein): text -align: center, line-height: parent height

2. Absolute Positionierung + Rand, um eine vertikale und horizontale Zentrierung zu erreichen, müssen Sie wissen die Höhe und Breite des untergeordneten Elements

3. Absolute Positionierung + Transformation, um eine vertikale und horizontale Zentrierung zu erreichen. Sie müssen die Höhe und Breite des untergeordneten Elements nicht kennen: Position: absolut; 50 %; links: transformieren (-50 %, -50 %)

4. Die Elemente sind display: table-cell; -align: center. Die untergeordneten Elemente sind auf Vertical-Align: Center eingestellt

5 Verwenden Sie das Pseudoelement des übergeordneten Elements für die vertikale Zentrierung (das übergeordnete Element erfordert die Höhe) und legen Sie die Höhe fest das Pseudoelement auf 100 % und setzen Sie Vertical-Align: Middle, Display: Inline-Block; das Unterelement legt Vertical-Align: Center Display: Inline-Block fest : Mitte oder Rand: 0; unten: 0; 🎜 >

11. Verwendung von Pseudoelementen

Antwort: Gemeinsame Pseudoklassen - :hover, :link, :active, : Ziel, :not(),:focus. Häufige Pseudoelemente – ::first-letter, ::first-line, ::before, ::after, ::selection::before und ::after für eindeutigen Inhalt in CSS. Fügen Sie Inhalte zum hinzu logischer Kopf oder Schwanz eines Elements während des Renderns.

Diese Ergänzungen werden nicht im DOM angezeigt, ändern den Dokumentinhalt nicht und können nicht kopiert werden. Sie werden nur in der CSS-Rendering-Ebene hinzugefügt.

Verwenden Sie also nicht :before oder :after, um aussagekräftige Inhalte anzuzeigen, sondern versuchen Sie, dekorative Inhalte wie Symbole anzuzeigen

12.css-Selektor

Antwort: Wildcard-Selektor, Tag-Selektor, Klassen-Selektor, ID-Selektor, Attribut-Selektor, Leerzeichen-Selektor ist größer als Selektor plus Vorzeichen-Selektor 13 .p Setzen Sie den Abstand auf 100 % Ausdruck

Antwort: Ob im Standardmodus oder im Box-Sizing-Modus, der Abstand ist Teil der Gesamtbreite des Elements. Also zu diesem Zeitpunkt die Leistung von p ist die Farbe, die p entspricht 14. Verwendung von em, rem, px

Antwort: em ist eine relative Längeneinheit. Die Schriftgröße relativ zum Text im aktuellen Objekt. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers. Rem ist nur relativ zur Schriftgröße des HTML-Stammelements, um px Pixel (Pixel) zu berechnen. Relative Längeneinheit. Pixel px beziehen sich auf die Bildschirmauflösung des Monitors. 15. Verwendung und Vorsichtsmaßnahmen für den Rand Antwort: Wenn der Rand verwendet wird, scheint der Rand zwischen zwei benachbarten Tags zusammengeführt zu werden, d. h. der obere und untere Rand des oberen und unteren Tags werden festgelegt . Wenn , wird es automatisch zusammengeführt und der größte Attributwert ist das tatsächliche Intervall zwischen den beiden

16. Listen Sie mehrere gängige CSS3-Attribute und Verwendungen auf

Antwort: Zu den häufigsten gehören: border-radius: Festlegen der abgerundeten Ecken des Etiketts; box-shadow: Festlegen des Schattens, box-sizing: Ändern des Boxmodells usw. 17. Vergleich der Verwendung von Less und Sass

Antwort: Der Unterschied besteht darin, dass die Less-Umgebung einfacher ist als SassDie Installation von Sass erfordert die Installation von Ruby Environment. Less basiert auf Javascript. Sie müssen Less.js einführen, um den Code zu verarbeiten und CSS an den Browser auszugeben. Sie können Less auch im Entwicklungsprozess verwenden und ihn dann kompilieren eine CSS-Datei und platzieren Sie diese direkt im Projekt.

Less ist einfacher zu verwenden als Sass

Less passt nicht die ursprünglichen Funktionen von CSS an, sondern fügt CSS basierend auf der vorhandenen CSS-Syntax prozedurale Sprachfunktionen hinzu.

Sass hat leistungsfähigere Funktionen als Less

Sass hat Variablen und Bereiche

2 : Bedingungen, Schleifendurchlauf, Vererbung, Referenz

Datenstruktur: Array, Karte

Less- und Sass-Verarbeitungsmechanismen sind unterschiedlich

Ersteres wird über den Client verarbeitet, Letzteres wird über den Server verarbeitet. Im Vergleich dazu ist Ersteres etwas langsamer als Letzteres.

Der einzige Unterschied zwischen Variablen in Less und Sass besteht darin, dass Less @ und Sass $ verwendet. Die Ähnlichkeiten

Less und Sass haben einige Syntax gemeinsam, wie zum Beispiel die folgende:

1. Mixins – Klasse innerhalb der Klasse;

2. Parametermischung – Klassen, die Parameter übergeben können, genau wie Funktionen;

3 Wird in CSS verwendet.

5. Sie können Farben bearbeiten.

6 - Ändern Sie den Stil lokal.

8. Verwenden Sie JavaScript-Ausdrücke, um Werte in CSS zuzuweisen.

Wenn es um CSS geht, werden Sie natürlich auch nach CSS-Vorverarbeitungssprachen wie less, scss usw. fragen. Sie können die entsprechenden Informationen selbst überprüfen, und ich werde sie nicht erklären viel hier

Verwandte Tutorial-Empfehlungen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonHäufige Fragen zu Front-End-CSS-Interviews. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!