Häufige CSS-Interviewfragen

CSS-Einführung
1. Interner Stil Tabelle, 3. Externes Stylesheet

Link @import
a. Link ist ein HTML-Tag, und @import wird von CSS bereitgestellt und kann nur CSS laden

b geladen wird, wird gleichzeitig der Link geladen und das von @import referenzierte CSS wartet, bis die Seite geladen ist, bevor es geladen wird.

c import kann nur von IE5 oder höher erkannt werden, und der Link wird geladen ein HTML-Tag, es gibt kein Kompatibilitätsproblem

d Die Gewichtung der Link-Methode ist höher als die Gewichtung von @import

e Bei Verwendung von Javascript zur Steuerung des DOM, um den Stil zu ändern , Sie können nur die Link-Methode verwenden, da @import nur CSS sieht. Es ist kein DOM und kann den

CSS-Basisselektor steuern:
1 -Klassennamen-Selektor).
3. ID-Selektor vier neueste)

CSS-Verbindungsselektor:

Nachkommenselektor E>F Kindelementselektor Schnittpunktselektor Union-Selektor, Link-Pseudoklasse selector lvha

Ein einzelner Doppelpunkt (:) wird für CSS3-Pseudoklassen und ein doppelter Doppelpunkt (::) für CSS3-Pseudoelemente verwendet

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2): stellt das zweite li-Element unter ul dar
li:nth-child(2): Zeigt an, dass es sowohl ein li-Element als auch das zweite Element unter ul ist (kann nicht gefunden werden).
Es wird empfohlen, im Allgemeinen den n-ten Typ zu verwenden, da die Wahrscheinlichkeit geringer ist, dass Probleme auftreten.
Drei Hauptfunktionen von CSS: CSS-Kaskadierung, CSS-Vererbung, CSS-Priorität
Sprechen Sie über Ihr Verständnis des CSS-Layouts

Box-Modell

Machen Sie dem Floating den Weg frei:
1. Zusätzliche Tag-Methode,

<p style="clear:both"></p>

2. Methode zum Hinzufügen eines Überlaufattributs zum übergeordneten Element
3. Verwendung nach Pseudoelement, um Floats zu löschen

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4 Floats löschen

Positionierungsmodus und Kantenversatz:

Elemente anzeigen und ausblenden:

display:none;
overflow:hidden

Cursor im Mausstil

default Xiaobai Default, pointer, move, text, not-allowed verbietet

vertikal-align vertikale Ausrichtung

Überlauftext-Auslassungsanzeige
1.white-space:nowrap erzwingt, dass Text in einer Zeile angezeigt wird on
2.overflow: versteckt hinter dem Teil versteckt

3.text-overflow: Ellipse zeigt ein Auslassungszeichen an, wenn der Text im Objekt überläuft

Gemeinsame Layoutmethoden:
Festes Layout,

Flow (%)-Layout,

flexibles (Flex)-Layout,
rem-Layout
schwebendes Layout, klares Float-
Positionierungslayout,

Rand und Polsterung

Blöcke Ebenenelement ist vertikal zentriert
So zentrieren Sie ein p nach oben, unten, links und rechts
1.
links:50%; oben:50%
transformieren: translator(-50%,-50% )
2 .
oben: 0; unten: 0; Rand: auto

3.px

Drei Hauptfunktionen von CSS: kaskadierende Vererbungspriorität
Vererbbar Attribute
Textbezogen: Schriftfamilie, Schriftgröße, Schriftstil, Schriftvariante, Schriftstärke, Schriftart, Buchstabenabstand, Zeilenhöhe, Farbe

Listenbezogen: Listenstil -image, list-style-position, list-style-type, list-style

Neue CSS3-Funktion
implementiert abgerundete Ecken (Rahmenradius), Schatten (Box-Shadow) und Spezialeffekte auf Text (Text-Shadow), linearer Farbverlauf (Gradient), Transformation (Transformation)

fügt weitere CSS-Selektoren Multi-Background RGBA hinzu, das einzige in CSS3 eingeführte Pseudoelement ist ::selection, media query, multi- Spaltenlayout

CSS-Einführung

1. Inline-Stil, 2. Internes Stylesheet, 3. Externes Stylesheet Link @importd. Der Link-Stil hat ein hohes Gewicht Das Gewicht von @import

e Wenn Sie Javascript zur Steuerung des DOM verwenden, können Sie nur die Link-Methode verwenden, da @import sieht nur CSS, nicht das DOM, das steuern kann

CSS-Grundlagen-Selektor:
2. Klassenselektor (Mehrklassen-Namenselektor). vier#

4. Wildcard-Selektor*

CSS-Verbindungsselektor:
Nachkommenselektor E>F
Unterelementselektor
Schnittpunktselektor
Union-Selektor,
Link-Pseudoklassenselektor lvha
Einzelner Doppelpunkt (:) ist wird für CSS3-Pseudoklassen verwendet, und Doppelpunkt (::) wird für CSS3-Pseudoelemente verwendet

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2): Stellt das zweite li-Element unter ul
li dar :nth-child(2): Zeigt an, dass es sich sowohl um ein li-Element als auch um das zweite Element unter ul handelt (kann nicht gefunden werden).
Es wird empfohlen, im Allgemeinen den n-ten Typ zu verwenden, da die Wahrscheinlichkeit geringer ist, dass Probleme auftreten.
Drei Hauptfunktionen von CSS: CSS-Kaskadierung, CSS-Vererbung, CSS-Priorität
Sprechen Sie über Ihr Verständnis des CSS-Layouts

Box-Modell

Machen Sie dem Floating den Weg frei:
1. Zusätzliche Tag-Methode,

<p style="clear:both"></p>

2. Methode zum Hinzufügen eines Überlaufattributs zum übergeordneten Element
3. Verwendung nach Pseudoelement, um Floats zu löschen

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4 Floats löschen

Positionierungsmodus und Kantenversatz:

Elemente anzeigen und ausblenden:
display:none;
overflow:hidden

Cursor im Mausstil
default Xiaobai Default, pointer, move, text, not-allowed verbietet
vertikal-align vertikale Ausrichtung

Überlauftext-Auslassungsanzeige
1.white-space:nowrap erzwingt, dass Text in einer Zeile angezeigt wird on
2.overflow: versteckt hinter dem Teil versteckt
3.text-overflow: Ellipse zeigt ein Auslassungszeichen an, wenn der Text im Objekt überläuft

Gemeinsame Layoutmethoden:
Festes Layout,
Flow (%)-Layout,
flexibles (Flex)-Layout,
rem-Layout
schwebendes Layout, klares Float-
Positionierungslayout,
Rand und Polsterung

Blöcke Ebenenelement ist vertikal zentriert
So zentrieren Sie ein p nach oben, unten, links und rechts
1.
links:50%; oben:50%
transformieren: translator(-50%,-50% )
2 .
oben: 0; rechts: 0; Rand: auto
3.px
Drei Hauptfunktionen von CSS: kaskadierende Vererbungspriorität
Vererbbar Attribute
Textbezogen: Schriftfamilie, Schriftgröße, Schriftstil, Schriftvariante, Schriftstärke, Schriftart, Buchstabenabstand, Zeilenhöhe, Farbe

Listenbezogen: Listenstil -image, list-style-position, list-style-type, list-style

Neue CSS3-Funktion
implementiert abgerundete Ecken (Rahmenradius), Schatten (Box-Shadow) und Spezialeffekte auf Text (Text-Shadow), linearer Farbverlauf (Gradient), Transformation (Transformation)

fügt weitere CSS-Selektoren Multi-Background RGBA hinzu, das einzige in CSS3 eingeführte Pseudoelement ist ::selection, media query, multi- Spaltenlayout

Empfohlene verwandte Tutorials: CSS-Video-Tutorial

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