Sieben wichtige CSS-Interviewfragen

Inhaltsverzeichnis

• 1. Das Box-Modell in CSS3
• 2. Der Unterschied zwischen display:none und sichtbarkeit:hidden
• 3. Reden wir über CSS-Sprites
• . Was sind die Attributwerte der Position?
• 5. Was sind die Unterschiede zwischen PNG, GIF, JPG und WEBP und wie wählt man sie aus?
• 6. Was sind CSS-Selektoren? Priorität?
• 7. Floating-bedingt
• (1) Wann müssen Sie Floats räumen?

• (2) Wie lösche ich Schwimmer?

Themenempfehlung: Zusammenfassung der CSS-Interviewfragen 2020 (aktuell)

1. Box-Modell in CSS3

Es gibt zwei Arten von Box-Modellen in CSS3: Standard-Box-Modell und IE-Box-Modell

• Der Unterschied zwischen dem Standard-Box-Modell und dem IE-Box-Modell besteht darin, dass sich die Breite und Höhe des Standard-Box-Modells auf die Breite und Höhe des Inhalts beziehen, während sich die Breite und Höhe auf die Breite und Höhe des Inhalts beziehen des IE-Box-Modells beziehen sich auf den Inhalt, die Summe aus Auffüllung und Rändern.

• In CSS3 können Sie mit box-sizeing:border-box ein normales Boxmodell in ein IE-Boxmodell konvertieren. Manchmal haben wir die Breite und Höhe einer Box festgelegt, aber wenn wir border ändern möchten, sodass sich die Größe der Box ändert, können wir sie in ein IE-Boxmodell konvertieren, ohne die Größe der Box berechnen zu müssen jedes Mal zufrieden.

• im Box-Modell

  • box-sizeing:content-box stellt das Standard-Box-Modell dar (Standard)
  • box-sizeing:border-box stellt das IE-Box-Modell dar (Das heißt, das seltsame Boxmodell)

Darüber hinaus gibt es: Flex-elastisches Boxmodell

2. Der Unterschied zwischen display:none und sichtbarkeit:hidden

Beide Attribute machen das Element ausgeblendet

Unterschied:

( 1) Im Rendering-Baum lässt

• display:none das Element vollständig aus dem Rendering-Baum verschwinden und nimmt beim Rendern keinen Platz ein.
• visibility:hidden Das Element wird angezeigt verschwindet nicht aus dem Rendering-Baum. Das gerenderte Element belegt weiterhin den entsprechenden Platz, aber der Inhalt ist nicht sichtbar

(2) Vererben

• display:none Ja oder nein Wenn Attribute vererbt werden, verschwinden die untergeordneten Knoten zusammen mit dem übergeordneten Knoten aus dem Rendering-Baum und können nicht durch Ändern der Attribute der untergeordneten Knoten angezeigt werden.
• visibility:hidden ist ein geerbtes Attribut. Die Nachkommenknoten verschwinden, weil sie hidden erben. Durch das Setzen von visibility:visible können die Nachkommenknoten angezeigt werden.

(3) Das Ändern von display eines Elements im regulären Dokumentfluss führt normalerweise dazu, dass das Dokument neu angeordnet wird, aber das Ändern des visibility-Attributs führt nur dazu, dass das Element neu gezeichnet wird

(4) Wenn ein Screenreader verwendet wird, wird der auf display:none eingestellte Inhalt nicht vorgelesen, wohl aber der auf visibility:hidden eingestellte Inhalt. visibility:hidden

3. Lassen Sie uns über CSS-Sprites sprechen

Konzept:

Ein Sprite ist ein Zusammenfügen mehrerer kleiner Bilder in einem Bild Passen Sie damit das Hintergrundmuster an, das angezeigt werden soll, anhand der Größe des background-position-Elements.

Vorteile:

• Reduzieren Sie die Anzahl der HTTP-Anfragen, was die Ladegeschwindigkeit der Seite bis zu einem gewissen Grad verbessert.
• Reduziert die Größe der Bilder, da jedes Bild über Header-Informationen verfügt, die dieselben Header-Informationen haben, wodurch sich die Anzahl der Bytes des Bildes verringert.
• Es ist praktisch, den Stil zu ändern. Sie müssen nur ein oder weniger Bilder hinzufügen, indem Sie die Farbe oder den Stil des Bildes ändern. Der Stil der gesamten Webseite kann geändert werden.
• Reduziert den Aufwand beim Benennen von Bildern, benennen Sie einfach ein oder mehrere Bilder

Nachteile:

• Wenn sich der Seitenhintergrund geringfügig ändert, muss das gesamte zusammengeführte Bild geändert werden.
• Das Zusammenführen mehrerer Bilder ist mühsam Reservieren Sie außerdem einen gewissen Platz, um unnötige Hintergründe zu vermeiden
• Wenn das Bild auf adaptiven Seiten unter Breitbild- oder hochauflösenden Bildschirmen nicht breit genug ist, kann der Hintergrund unterbrochen werden

4. Was sind die Attributwerte der Position?

属性值	概述
absolute	生成绝对定位的元素，相对于static定位以外的一个父元素进行定位
relative	生成相对定位的元素，相对于其原来的位置进行定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
static	默认值，没有定位，元素出现在正常的文档流中
inherit	规定从父元素继承position属性的值

5. Was sind die Unterschiede zwischen PNG, GIF, JPG und WEBP und wie wählt man sie aus?

(1) GIF

• GIF-Bilder speichern nur 8-Bit-Indizes und unterstützen bis zu 256 Farben
• verwenden verlustfreie Komprimierung und haben eine kleinere Größe
• Unterstützt transparente und einfache Animationen

Anwendbar für : einfaches Farblogo, Symbol, Drahtmodell, einfache Animation

(2) JPG

• Mit verlustbehafteter Komprimierung können Sie die Qualität der Komprimierung steuern
• Mit direkter Farbe und satten Farben
• Transparenz wird nicht unterstützt

Anwendbar in : Bunte Bilder, Verlaufsbilder

(3) PNG

• png-8 ist ein Bitmap-Format, das verlustfreie Komprimierung verwendet und auf 8-Bit-Indizierung basiert GIF bietet eine bessere Transparenzunterstützung und eine kleinere Größe bei gleicher Qualität, Animationen werden jedoch nicht unterstützt. Geeignet für Symbole, Hintergründe, Schaltflächen.
• png-24 verwendet verlustfreie Komprimierung und ist ein Bitmap-Format, das auf direkter Farbe basiert. Die Größe ist größer als die oben genannten, aber die Bildqualität ist hoch. Es eignet sich zum Speichern von Quelldateien oder Bildformaten, die erforderlich sind Sekundärbearbeitung.

(4) WEBP

• Entwickelt von Google, kleiner in der Größe
• Unterstützt verlustbehaftete Komprimierung und verlustfreie Komprimierung
• Unterstützt Transparenz Und Animation

ist geeignet für : APP oder Webseite, die WebP unterstützt

格式	优点	缺点	适用场景
gif	文件小，支持动画、透明，无兼容性问题	只支持256种颜色	色彩简单的logo、icon、动图
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

6. Was sind die CSS-Selektoren? Priorität?

选择器	格式
标签选择器	p
类选择器	#myclassname
id选择器	#myid
相邻兄弟选择器	h1+p
子选择器	ul>li
后代选择器	li a
通配符选择器	*
属性选择器	a[ref=“eee”]
伪类选择器	li:last-child

Wenn Sie ein Element direkt nach einem anderen Element auswählen müssen und beide das gleiche übergeordnete Element haben, können Sie den benachbarten Geschwisterselektor verwenden. Wenn Sie beispielsweise den oberen Rand des Absatzes vergrößern möchten, der unmittelbar nach dem angezeigt wird h1-Element, kann wie folgt geschrieben werden:

h1 + p {margin-top:50px;}

Für die Priorität des Selektors:

• Elementselektor: 1
• Klassenselektor: 10
• ID-Selektor: 100
• Element-Tag: 1000

Es ist zu beachten, dass:

• !wichtiger deklarierter Stil Der höchste Priorität
• Wenn die Prioritäten gleich sind, wird der letzte Stil wirksam
• Der geerbte Stil hat die niedrigste Priorität

Attributvererbung:

• Vererbbare Attribute: Schriftgröße, Schriftfamilie, Farbe
• Nicht vererbbare Stile: Rahmen, Innenabstand, Rand, Breite, Höhe

7. Nach dem Floating- Wenn verwandte

-Elemente auf Float eingestellt sind, wird die Anzeige automatisch zum Block.

(1) Wann müssen Schwimmer geräumt werden?

Die durch Floating verursachten Probleme sind wie folgt:

• Die Höhe des übergeordneten Elements kann nicht erweitert werden, was sich auf Elemente auf derselben Ebene wie das übergeordnete Element auswirkt.
• Nicht -level-Elemente auf derselben Ebene wie das schwebende Element. Darauf folgen schwebende Elemente
• Wenn ein Element schwebt, muss auch das Element davor schweben, andernfalls wirkt es sich auf die Struktur der Seite aus

(2) Wie lösche ich Floats?

Floats werden wie folgt gelöscht:

• Definieren Sie das height-Attribut für das übergeordnete p.
• Fügen Sie nach dem letzten Floating-Element ein leeres p-Tag hinzu und fügen Sie clear:bothStil
• Hinzufügen overflow:hidden oder overflow:auto

Verzeichnis

1. Box-Modell in CSS3
• 2. Unterschiede in der Anzeige:keine und in der Sichtbarkeit:versteckt
• 3. Lassen Sie uns über CSS-Sprites sprechen
• 4 Was sind die Attributwerte der Position?
• 5. Was sind die Unterschiede zwischen PNG, GIF, JPG und WEBP und wie wählt man sie aus?
• 6. Was sind CSS-Selektoren? Priorität?
• 7. Floating-bedingt
• (1) Wann müssen Sie Floats räumen?
  • (2) Wie lösche ich Floats?

1. Box-Modell in CSS3

Es gibt zwei Arten von Box-Modellen in CSS3: Standard-Box-Modell und IE-Box-Modell

• Der Unterschied zwischen dem Standard-Box-Modell und dem IE-Box-Modell ist: Die Breite und Höhe des Standard-Box-Modells beziehen sich auf die Breite und Höhe des Inhalts Die Breite und Höhe des IE-Boxmodells bezieht sich auf die Summe aus Inhalt, Innenabstand und Rändern.

• In CSS3 können Sie mit

  ein normales Boxmodell in ein IE-Boxmodell konvertieren. Manchmal haben wir die Breite und Höhe einer Box festgelegt, aber wenn wir box-sizeing:border-box ändern möchten, sodass sich die Größe der Box ändert, können wir sie in ein IE-Boxmodell konvertieren, ohne die Größe der Box berechnen zu müssen jedes Mal zufrieden. border

• im Box-Modell
  • stellt das Standard-Box-Modell dar (Standard) box-sizeing:content-box
  • stellt das IE-Box-Modell dar (Das heißt, das seltsame Boxmodell) box-sizeing:border-box

Darüber hinaus gibt es:

Flex-elastisches Boxmodell

2. Der Unterschied zwischen display:none und sichtbarkeit:hidden

Beide Attribute machen das Element ausgeblendet

Unterschied:

( 1) Im Rendering-Baum lässt

• das Element vollständig aus dem Rendering-Baum verschwinden und nimmt beim Rendern keinen Platz ein. display:none
• Das Element wird angezeigt verschwindet nicht aus dem Rendering-Baum. Das gerenderte Element belegt weiterhin den entsprechenden Platz, aber der Inhalt ist nicht sichtbar visibility:hidden

(2) Vererben

• Ja oder nein Wenn Attribute vererbt werden, verschwinden die untergeordneten Knoten zusammen mit dem übergeordneten Knoten aus dem Rendering-Baum und können nicht durch Ändern der Attribute der untergeordneten Knoten angezeigt werden. display:none
• ist ein geerbtes Attribut. Die Nachkommenknoten verschwinden, weil sie visibility:hidden erben. Durch das Setzen von hidden können die Nachkommenknoten angezeigt werden. visibility:visible

(3) Das Ändern von

eines Elements im regulären Dokumentfluss führt normalerweise dazu, dass das Dokument neu angeordnet wird, aber das Ändern des display-Attributs führt nur dazu, dass das Element neu gezeichnet wird visibility

(4) Wenn ein Screenreader verwendet wird, wird der auf

eingestellte Inhalt nicht vorgelesen, wohl aber der auf display:none eingestellte Inhalt. visibility:hiddenvisibility:hidden

3. Lassen Sie uns über CSS-Sprites sprechen

Konzept:

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。

优点：

• 减少HTTP请求数，在一定程度上提高了页面的加载速度
• 减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
• 减少了图片命名的困扰，只要给一张或几张图片命名即可

缺点：

• Wenn sich der Seitenhintergrund geringfügig ändert, muss das gesamte zusammengeführte Bild geändert werden.
• Das Zusammenführen mehrerer Bilder ist mühsam Reservieren Sie außerdem einen gewissen Platz, um unnötige Hintergründe zu vermeiden
• Wenn das Bild auf adaptiven Seiten unter Breitbild- oder hochauflösenden Bildschirmen nicht breit genug ist, kann der Hintergrund unterbrochen werden

4. Was sind die Attributwerte der Position?

属性值	概述
absolute	生成绝对定位的元素，相对于static定位以外的一个父元素进行定位
relative	生成相对定位的元素，相对于其原来的位置进行定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
static	默认值，没有定位，元素出现在正常的文档流中
inherit	规定从父元素继承position属性的值

5. Was sind die Unterschiede zwischen PNG, GIF, JPG und WEBP und wie wählt man sie aus?

(1) GIF

• GIF-Bilder speichern nur 8-Bit-Indizes und unterstützen bis zu 256 Farben
• verwenden verlustfreie Komprimierung und haben eine kleinere Größe
• Unterstützt transparente und einfache Animationen

Anwendbar für : einfaches Farblogo, Symbol, Drahtmodell, einfache Animation

(2) JPG

• Mit verlustbehafteter Komprimierung können Sie die Qualität der Komprimierung steuern
• Mit direkter Farbe und satten Farben
• Transparenz wird nicht unterstützt

Anwendbar in : Bunte Bilder, Verlaufsbilder

(3) PNG

• png-8 ist ein Bitmap-Format, das verlustfreie Komprimierung verwendet und auf 8-Bit-Indizierung basiert GIF bietet eine bessere Transparenzunterstützung und eine kleinere Größe bei gleicher Qualität, Animationen werden jedoch nicht unterstützt. Geeignet für Symbole, Hintergründe, Schaltflächen.
• png-24 verwendet verlustfreie Komprimierung und ist ein Bitmap-Format, das auf direkter Farbe basiert. Die Größe ist größer als die oben genannten, aber die Bildqualität ist hoch. Es eignet sich zum Speichern von Quelldateien oder Bildformaten, die erforderlich sind Sekundärbearbeitung.

(4) WEBP

• Entwickelt von Google, kleiner in der Größe
• Unterstützt verlustbehaftete Komprimierung und verlustfreie Komprimierung
• Unterstützt Transparenz Und Animation

ist geeignet für : APP oder Webseite, die WebP unterstützt

格式	优点	缺点	适用场景
gif	文件小，支持动画、透明，无兼容性问题	只支持256种颜色	色彩简单的logo、icon、动图
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

6. Was sind die CSS-Selektoren? Priorität?

选择器	格式
标签选择器	p
类选择器	#myclassname
id选择器	#myid
相邻兄弟选择器	h1+p
子选择器	ul>li
后代选择器	li a
通配符选择器	*
属性选择器	a[ref=“eee”]
伪类选择器	li:last-child

Wenn Sie ein Element direkt nach einem anderen Element auswählen müssen und beide das gleiche übergeordnete Element haben, können Sie den benachbarten Geschwisterselektor verwenden. Wenn Sie beispielsweise den oberen Rand des Absatzes vergrößern möchten, der unmittelbar nach dem angezeigt wird h1-Element, kann wie folgt geschrieben werden:

h1 + p {margin-top:50px;}

Für die Priorität des Selektors:

• Elementselektor: 1
• Klassenselektor: 10
• ID-Selektor: 100
• Element-Tag: 1000

Es ist zu beachten, dass:

• !wichtiger deklarierter Stil Der höchste Priorität
• Wenn die Prioritäten gleich sind, wird der letzte Stil wirksam
• Der geerbte Stil hat die niedrigste Priorität

Attributvererbung:

• Vererbbare Attribute: Schriftgröße, Schriftfamilie, Farbe
• Nicht vererbbare Stile: Rahmen, Innenabstand, Rand, Breite, Höhe

7. Nach dem Floating- Wenn verwandte

-Elemente auf Float eingestellt sind, wird die Anzeige automatisch zum Block.

(1) Wann muss ich Schwimmer räumen?

Die durch Floating verursachten Probleme sind wie folgt:

• Die Höhe des übergeordneten Elements kann nicht erweitert werden, was sich auf Elemente auf derselben Ebene wie das übergeordnete Element auswirkt
• Nicht-ebene Elemente auf derselben Ebene wie das schwebende Element. Schwimmende Elemente folgen ihm
• Wenn ein Element schwebt, muss auch das Element davor schweben, andernfalls wirkt es sich auf die Struktur der Seite aus

(2) Wie lösche ich Floats?

Floats werden wie folgt gelöscht:

• Definieren Sie das height-Attribut für das übergeordnete p.
• Fügen Sie nach dem letzten Floating-Element ein leeres p-Tag hinzu und fügen Sie clear:bothStyle
• Add overflow:hidden oder overflow:auto

zum übergeordneten Tag hinzu, das das schwebende Element enthält: Empfohlene verwandte Tutorials: CSS Video-Tutorial

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