Organisieren Sie häufig gestellte CSS-Interviewfragen

Box-Modell

• Standard-Box-Modell : Inhalt

• Seltsames Boxmodell: Rand+Inhalt

Themenempfehlung:2020 CSS-Interviewfragen Zusammenfassung (aktuell)

Inline-Elemente

• Funktionen
  • Breite und Höhe einstellen ist ungültig
  • Einstellung des Randes ist nur gültig für links und rechts sind Oben und Unten ungültig
  • Die Einstellung der Auffüllung gilt für oben, unten, links und rechts, wodurch der Leerraum erhalten bleibt
  • Wird nicht automatisch umbrochen
• Gemeinsame Inline-Elemente
  • a span b i strong

Inline-Blockelement

• Funktionen
  • kann Breite und Höhe festlegen
  • Anzeige in derselben Zeile wie alle Inline-Elemente
• Gemeinsame Inline-Blockelemente
  • img-Eingabeschaltfläche auswählen

Elemente auf Blockebene

• Funktionen
  • Sie können die Breite und Höhe festlegen
  • Alle Blöcke Elemente auf -Ebene belegen eine exklusive Zeile
  • Wenn Breite und Höhe nicht festgelegt sind, werden sie standardmäßig geerbt Breite und Höhe des übergeordneten Elements
• Gemeinsame Elemente auf Blockebene
  • p p ul li h1-h6

CSS-Implementierung zentriert

• Marge: 0 automatisch;
• Positionieren und transformieren:übersetzen
• Flex-Layout
• text-align und line-height, verwenden Zentrieren Sie die Schriftart innerhalb des Bereichs ihres übergeordneten Elements
• vertikal-align : middle; Wird verwendet, um die Zentrierung von Inline-Elementen festzulegen

CSS-Hack

• Erklärung: Schreiben Sie für verschiedene Browser aus Kompatibilitätsgründen unterschiedliche CSS
  • Bedingungs-Hack

  <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  • Attribut-Hack

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  • Selektor-Hack

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

px und em

• px sind absolute Einheiten, der Wert ist fest
• em wird vererbt. Die Schriftgrößeneinheit des übergeordneten Elements wird

unterstützt

@support wird verwendet, um zu erkennen, ob der Browser ein bestimmtes CSS-Attribut unterstützt. Es kann als bedingte Beurteilung verstanden werden und wird im Allgemeinen zur Kompatibilitätsverarbeitung verwendet.

Medien

Medienabfragen, basierend auf dem CSS-Stil, der dem Viewport-Fall entspricht, funktionieren im Allgemeinen mit rem für mobile Kompatibilität.

calc

CSS-Berechnungsattribut, das zur dynamischen Berechnung von Längenwerten verwendet wird und mathematische Operationen unterstützt.

Clear Float

• Pseudoelement Clear Float
  • Prinzip: Clear:both im Pseudoelement des übergeordneten Elements festlegen, um das Problem des Höhenkollapses zu lösen.

  ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

BFC: ist eine unabhängige Layoutumgebung

• Formatierungskontext ist ein unabhängiger Rendering-Bereich für Elemente innerhalb von BFC. Isoliert von externen Elementen, sodass die Die Positionierung interner und externer Elemente beeinflusst sich nicht gegenseitig.
• Regeln
  • Unter demselben BFC werden standardmäßig zwei benachbarte Boxen vertikal angeordnet
  • Unter demselben BFC überlappen sich die Ränder von zwei benachbarten Boxen oben und unten
  • BFC überlappt nicht mit dem Float-Bereich
  • Bei der Berechnung der BFC-Höhe werden auch schwebende Unterelemente an der Berechnung beteiligt. Wenn die BFC-Höhe also nicht festgelegt ist, wird sie ebenfalls gestreckt durch die schwebenden Unterelemente.
  • Die Textebene wird nicht von der schwebenden Ebene abgedeckt, sondern umgibt sie

Um das Problem überlappender übergeordneter und untergeordneter Kanten zu lösen, wird der Rand verwendet des untergeordneten Elements bewegt sich zusammen mit dem übergeordneten Element

+Prinzip: Verwenden Sie Pseudoelemente, um dem übergeordneten Element eine Tabelle mit einer Höhe von 0 hinzuzufügen

Box-Modell

• Standard-Box-Modell: Inhalt
• Seltsames Box-Modell: Rand+Inhalt

Inline-Elemente

• Funktionen
  • Das Einstellen von Breite und Höhe ist ungültig.
  • Das Einstellen des Randes ist nur für links und rechts gültig, nicht oben und unten
  • Stellen Sie die Polsterung so ein, dass sie nach oben, unten, links und rechts wirksam ist und den Raum aufrechterhält
  • Wird nicht automatisch umbrochen
• Gemeinsame Inline-Elemente
  • a span b i strong

Inline-Blockelemente

• Funktionen
  • Das können Sie Legen Sie die Breite und Höhe fest
  • so dass sie an der gleichen Stelle wie alle Inline-Elemente angezeigt werden. Linie
• Gemeinsame Inline-Blockelemente
  • IMG-Eingabeschaltfläche auswählen

Elemente auf Blockebene

• Funktionen
  • Sie können die Breite und Höhe festlegen
  • Alle auf Blockebene Elemente belegen eine exklusive Zeile
  • Wenn Breite und Höhe nicht festgelegt sind, werden standardmäßig die Breite und Höhe des übergeordneten Elements geerbt
• Gemeinsame Elemente auf Blockebene
  • p p ul li h1-h6

CSS-Zentrierung

• Rand: 0 automatisch;
• Position Positionierung mit transform:translate
• Flex-Layout
• text-align with line-height, verwendet für Schriftarten im übergeordneten Elementbereich Inner center
• vertikal-align: middle Verwendet; um die Zentrierung von Inline-Elementen festzulegen

CSS-Hack

• Erklärung: Für verschiedene Browser schreiben Sie aus Kompatibilitätsgründen unterschiedliche CSS
  • Bedingungs-Hack

  <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  • Attribut-Hack

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  • Selektor-Hack

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

px und em

• px sind absolute Einheiten, der Wert ist fest
• em ist die vom übergeordneten Element geerbte Schriftgröße. Die Einheit

support

@support wird verwendet, um zu erkennen, ob der Browser ein bestimmtes CSS-Attribut unterstützt. Es kann als bedingte Beurteilung verstanden werden und wird im Allgemeinen zur Kompatibilitätsverarbeitung verwendet.

Medien

Medienabfragen, basierend auf dem CSS-Stil, der dem Viewport-Fall entspricht, funktionieren im Allgemeinen mit rem für mobile Kompatibilität.

calc

CSS-Berechnungsattribut, das zur dynamischen Berechnung von Längenwerten verwendet wird und mathematische Operationen unterstützt.

Clear Float

• Pseudoelement Clear Float
  • Prinzip: Clear:both im Pseudoelement des übergeordneten Elements festlegen, um das Problem des Höhenkollapses zu lösen.

  ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

BFC: ist eine unabhängige Layoutumgebung

• Formatierungskontext ist ein unabhängiger Rendering-Bereich für Elemente innerhalb von BFC. Isoliert von externen Elementen, sodass die Die Positionierung interner und externer Elemente beeinflusst sich nicht gegenseitig.
• Regeln
  • Unter demselben BFC werden standardmäßig zwei benachbarte Boxen vertikal angeordnet
  • Unter demselben BFC überlappen sich die Ränder von zwei benachbarten Boxen oben und unten
  • BFC überlappt nicht mit dem Float-Bereich
  • Bei der Berechnung der BFC-Höhe werden auch schwebende Unterelemente an der Berechnung beteiligt. Wenn die BFC-Höhe also nicht festgelegt ist, wird sie ebenfalls gestreckt durch die schwebenden Unterelemente.
  • Die Textebene wird nicht von der schwebenden Ebene abgedeckt, sondern umgibt sie

Um das Problem überlappender übergeordneter und untergeordneter Kanten zu lösen, wird der Rand verwendet des untergeordneten Elements bewegt sich zusammen mit dem übergeordneten Element

+ Prinzip: Verwenden Sie Pseudoelemente, um dem übergeordneten Element eine Tabelle mit einer Höhe von 0 hinzuzufügen

Empfohlene verwandte Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonOrganisieren Sie häufig gestellte CSS-Interviewfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!