Zusammenfassung der Fragen zu HTML- und CSS-Interviews

Fragen
zu HTML- Interviews : 1. So verstehen Sie die HTML-Semantik :
Semantik bedeutet, dass der Titel der Titel (h1) und die Liste eine Liste (ui, li) ist, die nicht alle in divs eingeschlossen sind

• Erleichtern Sie das Lesen (erhöhen Sie die Lesbarkeit des Codes)
• Machen Sie Suchmaschinen leichter lesbar (SEO)

2. Blockelemente & Inline-Elemente?

• Anzeige: Block / Tabelle; ：: div h1 h2 Tabelle ul ol p 等
• Anzeige: Inline / Inline-Block; 如 span img input buttion 等

Das CSS-Wissensmodul ist grob in fünf Teile gegliedert :

1. Layout

1. Berechnung der

Boxmodellbreite : offsetWidth = (Inhaltsbreite + innerer Rand + Rand), kein äußerer Rand. Die Antwort ist 100 + 20 + 2 ist 122. Wenn Box-Sizing: Border-Box zum obigen div1 hinzugefügt wird, enthält die Breite Auffüllung und Rand, und die Offset-Breite beträgt zu diesem Zeitpunkt 100.
2. Problem der vertikalen Randüberlappung:

• Der Rand oben und der Rand unten benachbarter Elemente überlappen sich
• Leerer Inhalt
  Überlappt sich auch. Die
  obige Antwort ist 15px.

3. Negatives Margenproblem

• Negative Werte für Rand oben und Rand links, das Element bewegt sich nach oben und links
• Negativer Rand rechts, das Element rechts bewegt sich nach links und behält den Einfluss nicht bei
• Negativer Rand-Boden, das untere Element bewegt sich nach oben, ohne sich selbst zu beeinflussen

4. BFC-Verständnis und -Anwendung

• Blockformatkontext, Formatierungskontext auf Blockebene

• Als unabhängiger Rendering-Bereich hat das Rendern interner Elemente keinen Einfluss auf die allgemeinen Bedingungen der BFC-Bildung von Elementen außerhalb der Grenze
  

• float ist nicht keiner

• Position ist absolut oder fest

• Überlauf ist nicht sichtbar

• Display ist eine häufige Anwendung von BFC wie Flex Inline-Block
  :

• Schwimmer löschen

5. Float Layout

• Der Zweck des Holy Grail-Layouts und des Double-Wing-Layouts:

1. Dreispaltiges Layout, die mittlere Spalte wird zuerst geladen und gerendert (der Inhalt ist der wichtigste).
2. Der Inhalt auf beiden Seiten ist fest und der mittlere Inhalt passt sich der Breite an.
3. Wird im Allgemeinen für PC-Webseiten verwendet

• Technische Zusammenfassung des Holy Grail-Layouts und des Double Flying Wing-Layouts

Float-Layout verwenden
Verwenden Sie negative Ränder auf beiden Seiten, um den mittleren Inhalt horizontal zu überlappen,
um zu verhindern , dass der mittlere Inhalt auf beiden Seiten abgedeckt wird, einer mit Polsterung und der andere mit Rand

6. Flex-Layout-
Überprüfung der allgemeinen Syntax:

• Flex-Richtung: Die Richtung der Hauptachse
• Begründungsinhalt: Ausrichtung der Hauptachse
• Ausrichtungselemente: Querachsenausrichtung
• Flex-Wrap: ob gewickelt werden soll
• Selbst ausrichten: Zeichnen Sie einen Dreipunktwürfel auf die Ausrichtung des untergeordneten Elements auf der Querachse
  
  

2. Positionierung

• Was ist die Positionierung von absolut bzw. relativ?

Relative Positionierung nach sich selbst
absolute Positionierung nach dem nächstgelegenen Positionierungselement (absolut, relativ, fest; wenn kein Positionierungselement vorhanden ist, Positionierung nach dem Körper)

• Wie kann die Ausrichtung des Zentrums erreicht werden?

Horizontal und vertikal zentrieren

Horizontal zentrieren:

Inline-Element: Textausrichtung: Ceter-
Block-Element: Rand: Auto-
Absolut-Element: Links: 50% + Rand-Links-Negativwert

Vertikal zentriert:
Inline-Element: Der Wert der Zeilenhöhe entspricht dem Höhenwert
Absolutes Element: Oben: 50% + Rand-Oben Negativer Wert
Absolutes Element: Transformation (-50%, -50%)
Absolutes Element: Oben, Links , unten rechts = 0 + Rand: auto

Drei, Grafikstil

• Wie die Zeilenhöhe vererbt wird

Schreiben Sie einen bestimmten Wert, z. B. 30px, dann wird der Wert vererbt (es ist leichter zu verstehen).
Schreibverhältnis, z. B. 2 / 1,5, dann wird das Verhältnis vererbt.
Schreibprozentsatz, z. B. 200%, dann wird der berechnete Wert geerbt werden

Vier, ansprechbar

• px, absolute Längeneinheit, am häufigsten verwendet
• em, relative Längeneinheit, relativ zum übergeordneten Element, nicht häufig verwendet
• rem, relative Längeneinheit, relativ zum Stammelement, wird häufig im reaktionsschnellen Layout verwendet

Gemeinsame Lösungen für reaktionsschnelles Layout

• Bei der Medienabfrage legen Sie die Schriftgröße des Stammelements entsprechend den verschiedenen Bildschirmbreiten fest
• rem,
  
  der Nachteil der relativen Einheit rem basierend auf dem Stammelement : "gestufte"
  
  Größe des Web-Ansichtsfensters
• window.screen.height // Bildschirmhöhe
• window.innerHeight // Höhe des Webseiten-Ansichtsfensters
• document.body.clientHeight // body 高度
• vh 1/100 der Ansichtsfensterhöhe der Webseite
• vw 1/100 der Breite des Webansichtsfensters
• vmax nimmt das Maximum der beiden, vmin das Minimum der beiden (horizontaler oder vertikaler Bildschirm)