Hallo, zukünftiges Opfer eines technischen Vorstellungsgesprächs! 👋
Bereiten Sie sich auf ein Interview für eine Frontend-Position vor? Sie können sich bereits vorstellen, wie Sie über coole React-Hooks und TypeScript-Generika sprechen werden, aber der Interviewer fragt plötzlich: "Was ist der Unterschied zwischen inline und inline-block?" Und Sie sind so: surprised_pikachu.jpg
Ja, ja, auch im Jahr 2026 lieben es die Leute auf Jobcentern, die Grundlagen zu wiederholen. Und wissen Sie was? Das ist richtig. Denn jemand, der das Boxmodell nicht versteht, aber versucht, das virtuelle DOM zu erklären, ist wie ein Fahrer, der nicht weiß, wo das Bremspedal ist, aber über Quantenmotoren spricht.
Lassen Sie uns die Fragen analysieren, die sogar Senioren vor dem Gespräch nervös googeln lassen.
1. Blockmodell (Box Model) — ein Klassiker des Genres
Frage: Woraus besteht ein Blockmodell?
Antwort für den Interviewer:
Jedes Element ist ein Schichtkuchen aus:
Content — der Inhalt selbst
Padding — Abstand innerhalb des Elements
Border — Rahmen
Margin — äußerer Einzug
Was Sie als Nächstes sagen sollten (um intelligent zu wirken):
"Standardmäßig gelten width und height nur für content. Wenn Sie jedoch box-sizing: border-box verwenden, enthalten die Abmessungen Padding und Border. Dies schützt vor unerwarteten Überläufen und ist seit langem Standard in CSS-reset."
Warum fragen sie:
99% der Layoutfehler entstehen, wenn Sie margin oder padding vergessen haben. Oder wenn box-sizing nicht der richtige ist.
2. Positionierung: Statisch, Relativ, Absolut, Fest, Sticky
Frage: Was ist der Unterschied zwischen den Positionierungstypen?
Kurze Antwort:
Static — normales Verhalten (als ob
positionüberhaupt nicht angegeben wäre)Relative - Verschiebung gegenüber seiner normalen Position
Absolute - Positionierung relativ zum nächsten positionierten Elternteil
Fixed — relativ zum Ansichtsfenster (haftet beim Scrollen)
Sticky — eine Mischung aus relativ und fest (haftet, wenn der Punkt erreicht ist)
Fallstrick:
Das absolute Element sucht nach einem übergeordneten Element mit position: relative/absolute/fixed. Wenn es nicht gefunden wird, wird es relativ zu <body> positioniert. Dies ist der Grund, warum das Modal manchmal in den Weltraum fliegt.
3. Flexbox — der Liebling aller Layout-Designer
Frage: Wie zentriert man div vertikal und horizontal?
Antwort im Jahr 2026:
.container {
display: flex;
justify-content: center; /* по горизонтали */
align-items: center; /* по вертикали */
}Zusätzliche Punkte:
"Es gibt auch Grid mit place-items: center, aber Flex ist einfacher für einachsige Layouts."
Wenn jemand beim Vorstellungsgespräch über margin: 0 auto und Tabellen spricht, steckt er entweder im Jahr 2010 fest oder prüft, ob Sie feststecken. 😄
4. Grid vs. Flexbox — die ewige Debatte
Frage: Wann verwendet man Grid und wann Flexbox?
Richtige Antwort:
Flexbox - für eindimensionale Layouts (Zeile ODER Spalte)
Grid - für zweidimensionale Layouts (Zeilen und Spalten gleichzeitig)
Beispiel:
Navigation, Karten in einer Reihe → Flexbox
Ganzes Seitenlayout, komplexes Raster → Raster
5. Spezifität der Selektoren (Specificity)
Frage: Welcher Stil wird angewendet?
#header .nav li { color: red; }
.nav li { color: blue; }
li { color: green; }Antwort:
Rot, weil die Spezifität als (ID, Class, Tag) gezählt wird:
Erster: (1, 1, 1) = 111
Zweiter: (0, 1, 1) = 11
Dritte: (0, 0, 1) = 1
Lifehack:!important unterbricht alles, aber es zu verwenden ist wie das Schreiben von Code in CAPS LOCK. Es funktioniert technisch, aber jeder wird schief schauen.
6. Semantisches HTML ist nicht nur ein Modewort
Frage: Warum braucht man semantische Tags?
<header>, <nav>, <article>, <section>, <footer> sind nicht nur stilvolle <div>.
Vorteile:
SEO — Suchmaschinen verstehen die Struktur
Accessibility — Screenreader wissen, was wo ist
Code-Lesbarkeit — schneller verstehen, was passiert
Anti-Muster:
<div class="header">
<div class="nav">...</div>
</div>Es ist wie eine Variable zu nennen var1, var2 — es funktioniert, aber warum?
7. Pseudoklassen vs. Pseudoelemente
Frage: Was ist der Unterschied?
Pseudoklassen (ein Doppelpunkt):
a:hover { }
li:first-child { }
input:focus { }Wählen Sie Elemente in einem bestimmten Zustand.
Pseudoelemente (zwei Doppelpunkte):
p::before { content: "👉 "; }
p::after { content: " 👈"; }Erstellen Sie virtuelle Elemente.
8. Z-Index und Overlay-Kontext
Frage: Warum befindet sich mein Element mit z-index: 9999 immer noch unter einem anderen Element?
Antwort:z-index funktioniert nur innerhalb seines Stacking Contexts (Überlagerungskontext).
Schaffen einen neuen Kontext:
position: absolute/relative/fixed+z-indexopacity < 1transformfilterUnd noch 10 weitere Eigenschaften
Wenn du im Codez-index: 99999siehst, solltest du wissen, dass hier jemand verzweifelt mit einem Bug gekämpft und verloren hat.
9. Maßeinheiten: px, em, rem, vh, vw
Frage: Was macht das aus?
Spickzettel:
px - absolute Pixel
em — relativ zur Schriftgröße des übergeordneten Elements (kaskadiert!)
rem — in Bezug auf die Schriftgröße
<html>(nicht kaskadierend)vh/vw - Prozentsatz der Höhe/Breite des Viewports
% — in Bezug auf den Elternteil
remist die beste Wahl für modernes adaptives Layout. Ändern Sie die Schriftgröße in HTML - alles wird skaliert.
10. Display: none vs Visibility: hidden vs Opacity: 0
Frage: Was ist der Unterschied?
Antwort:
Eigenschaft | Platz | Verfügbar für Veranstaltungen | Animiert |
|---|---|---|---|
| ❌ | ❌ | ❌ |
| ✅ | ❌ | ❌ |
| ✅ | ✅ | ✅ |
Wann was zu verwenden ist:
Vollständig entfernen —
display: noneAusblenden und Platz sparen —
visibility: hiddenSanftes Ein- und Ausblenden —
opacity
11. Anpassungsfähigkeit: Media Queries
Frage: Wie macht man eine Website anpassungsfähig?
Grundlegende Syntax:
/* Mobile first подход */
.container { width: 100%; }
@media (min-width: 768px) {
.container { width: 750px; }
}
@media (min-width: 1200px) {
.container { width: 1170px; }
}Aktueller Trend:
Verwenden Sie clamp() für eine gleichmäßige Skalierung:
font-size: clamp(1rem, 2vw, 2rem);12. CSS-Variablen (Benutzerdefinierte Eigenschaften)
Frage: Wie funktionieren CSS-Variablen?
Beispiel:
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Vorteile gegenüber Sass-Variablen:
Kann über JavaScript geändert werden
Unterstützen Sie die Vererbung
Sie funktionieren nativ im Browser
13. Vertikaler Margin Collapse
Frage: Warum summiert sich der Abstand zwischen zwei Blöcken nicht?
Antwort:
Vertikale Margins werden eingeklappt (die größere wird genommen). Dies wird als margin collapse bezeichnet.
Beispiel:
.block1 { margin-bottom: 20px; }
.block2 { margin-top: 30px; }
/* Расстояние между ними = 30px, а не 50px */So deaktivieren Sie:
Flexbox/Grid-Container
overflow: hiddenauf dem Elternteilpaddingoderborderauf dem Elternteil
14. Inline vs Inline-block vs Block
Frage: Was ist der Unterschied?
Wahrheitstabelle:
Typ | Breite/Höhe | Auf einer neuen Zeile | Margin/Padding ist möglich |
|---|---|---|---|
| ❌ | ❌ | Nur horizontal |
| ✅ | ❌ | ✅ Alles |
| ✅ | ✅ | ✅ Alles |
Ein Beispiel aus dem Leben:<span> — inline, <div> — block, und <button> standardmäßig — inline-block.
15. Pseudoklasse :nth-child() und seine Freunde
Frage: Wie wählt man jedes dritte Element aus?
Antwort:
li:nth-child(3n) { /* Каждый третий */ }
li:nth-child(odd) { /* Нечетные */ }
li:nth-child(even) { /* Четные */ }
li:nth-child(3n+1) { /* 1, 4, 7, 10... */ }Fallstrick::nth-child() zählt alle Nachbarn, auch unterschiedliche Typen. Wenn du nur bestimmte benötigst, verwende :nth-of-type().
🚀 Und jetzt zum Training (ohne Langeweile)
Okay, Sie haben all diese Fragen gelesen, vielleicht sogar etwas notiert. Aber seien wir ehrlich — in einer Woche wird die Hälfte aus deinem Kopf fliegen. So funktioniert unser Gehirn.
Problem: Theorie ohne Praxis ist wie das Anschauen eines Videos "Wie man schwimmen lernt". Verstanden, aber versuche nicht zu ertrinken.
Lösung: Übung, Übung, Übung. Und nicht nur "den Editor öffnen und drei Zeilen schreiben", sondern systematisch.
Hier kannst du wirklich aufpumpen:
Kodik - eine mobile App zum Erlernen der Programmierung, wobei:
Die Theorie wird nach und nach dosiert (ohne Überlastung)
Sofortige Praxis in interaktiven Aufgaben
Lernen Sie direkt am Telefon (in der U-Bahn, in der Schlange, überall)
Kurse in Python, JavaScript, HTML/CSS und anderen Technologien
Der Trick besteht darin, dass Sie nicht nur lesen, "wie Flexbox funktioniert", sondern sofort echte Elemente erstellen. Das Muskelgedächtnis wird gebildet, und beim Vorstellungsgespräch erinnern sich die Hände an die Syntax.
Bonus - Telegrammkanal Kodik — eine Community, in der wir nützliche Beiträge und Lifehacks teilen, neue Funktionen von Sprachen und Frameworks diskutieren und helfen, wenn etwas nicht klar ist.
Fazit: Wie vermasselt man das Vorstellungsgespräch nicht?
Drei goldene Regeln:
Keine Panik, wenn du die Antwort nicht weißt. Es ist besser, ehrlich zu sagen: „Ich bin mir nicht sicher, aber ich nehme an ...“ und logisch zu argumentieren, als Unsinn zu reden.
Übung ist wichtiger als Pauken. Layout-Pet-Projekte, kopiere deine Lieblingsseiten, zerlege und repariere. Mit den Händen zu arbeiten - das merkt man sich am besten.
Verstehen > Auswendiglernen. Zu wissen, dass
display: flexElemente zu Flex-Elementen macht, reicht nicht aus. Zu verstehen, warum und wann man es benutzt, ist das, was man braucht.
Viel Glück beim Vorstellungsgespräch! Möge der Flex mit dir sein. 🚀