10 hochfrequente Interviewfragen zu CSS in Web-Front-End-Interviews

1. Was ist der BFC-Mechanismus

BFC (Block Formatting Context), Blockebene Formatierungskontext ist ein unabhängiger Rendering-Bereich, der Elemente innerhalb des BFC von externen Elementen isoliert, sodass sich die Positionierung interner und externer Elemente nicht gegenseitig beeinflusst.

• Triggerbedingung (eine der folgenden)
  • Der Wert von float ist nicht none
  • Der Wert von overflow ist nicht sichtbar
  • Der Wert der Anzeige ist Der Wert einer der Tabellenzellen, Tabellenüberschriften und Inline-Blocks
  • Position ist nicht statisch oder relativ

Unter IE kann das Layout durch zoom:1

• Der Unterschied zwischen BFC-Layout und gewöhnlichem Dokumentfluss-Layout ausgelöst werden: BFC-Layoutregeln:
  1. Die Höhe schwebender Elemente wird von ihrem übergeordneten Element berechnet (das übergeordnete Element löst BFC aus).
  2. Nicht schwebende Elemente überdecken nicht die Position schwebender Elemente (nicht schwebende Elemente). BFC auslösen) )
  3. Der Rand wird nicht an das übergeordnete Element übergeben (das übergeordnete Element löst BFC aus)
  4. Die oberen und unteren Ränder zweier benachbarter Elemente, die zum selben BFC gehören, überlappen sich
  5. Normales Dokumentenfluss-Layout: Die Höhe schwebender Elemente wird nicht von ihrem übergeordneten Element berechnet.
  6. Nicht schwebende Elemente decken die Position schwebender Elemente ab.
  7. Der Rand wird an das übergeordnete Element übergeben.
  8. Zwei benachbarte Ränder oberhalb und unterhalb des Elements überlappen sich
• Anwendungen in Entwicklung
  • Ränderüberlappung verhindern
  • Kann schwebende Elemente enthalten - Interne Floats löschen (Floating löschen. Das Prinzip besteht darin, dass sich beide P's im selben BFC-Bereich befinden)
  • Adaptives zweispaltiges Layout

  • kann verhindern, dass Elemente durch Floating abgedeckt werden Elemente

Themenempfehlung: Zusammenfassung der CSS-Interviewfragen 2020 (aktuell)

2. Die neuen Selektoren und Attribute in CSS3

sind nur hier aufgeführt. Informationen zur spezifischen Verwendung finden Sie in meinem Artikel über die neuen Selektoren und Attribute in CSS3

• Attribute Selector

属性选择器	含义描述
E[att^="val"]	属性att的值以"val"开头的元素
E[att$="val"]	属性att的值以"val"结尾的元素
E[att*="val"]	属性att的值包含"val"字符串的元素

Attributauswahl

Bedeutung Beschreibung

E[att^="val"]

Attributelemente, deren att-Wert mit „val“ beginnt

E[att$="val"]

Elemente, deren Attribut att value mit „val“ endet

E[att*="val"]

Der Wert des Attributs att enthält das String-Element „val“

• Struktur-Pseudoklassenselektor

选择器	含义描述
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

• CSS3 neues Attribut

Attribut	Bedeutungsbeschreibung	Kompatibel
Übergang	Übergangseffekt festlegen
transformieren	Transformationseffekte (verschieben, skalieren, drehen, strecken oder strecken)
Animation	Animationseffekt
box-shadow	Schatteneffekt	FF3.5, Safari 4, Chrome 3
Textschatten	Textschatten	FF 3.5, Opera 10, Safari 4, Chrome 3
Rahmenfarben	Mehrere Farben für den Rand festlegen	FF3+
Border-Image	Bildrand	FF 3.5, Safari 4, Chrome 3
Textüberlauf	Textkürzung	IE6+, Safari4, Chrome3, Opera10
Zeilenumbruch	Zeilenumbruch	IE6+, FF 3.5, Safari 4, Chrome 3
Grenzradius	runde Ecke Rand	FF 3+, Safari 4, Chrome 3
Deckkraft	Deckkraft	alle
Box-Größe	Steuerbox-Modellkompositionsmodus	FF3+, Opera 10, Safari 4, Chrome 3
Umriss	Außenrand	FF3+, Safari 4, Chrome 3, Oper 10
Hintergrund -size	Gibt nicht die Größe des Hintergrundbilds an	Safari 4, Chrome 3, Oper 10
Hintergrundursprung	Geben Sie an, wo mit der Anzeige des Hintergrundbilds begonnen werden soll	Safari 4, Chrome 3, FF 3+
Hintergrundclip	Geben Sie an, wo mit dem Zuschneiden des Hintergrundbilds begonnen werden soll	Safari 4, Chrome 3
rgba	Stellen Sie den Farbwert basierend auf den drei Farbkanälen r, g, b ein , durch a, um die Transparenz einzustellen	Safari 4, Chrome 3, FF3, Oper 10

3. Zentriertes Layout

• Horizontale Zentrierung
  1. Inline-Elemente: text-align:center
  2. Elemente auf Blockebene: margin:0 auto
  3. Absolute Positionierung und Bewegung: absolute + transform
  4. Absolute Positionierung und negative Ränder: absolute + margin
  5. Flex-Layout: flex + justify-content:center
• Vertikal zentriert
  1. Untergeordnetes Element ist eine einzelne Textzeile: line-height:height
  2. absolute + transform
  3. flex + align-items:center
  4. Tabelle: display:table-cell; vertical-align: middle
  5. Position und oberen und negativen Rand verwenden
• Horizontale und vertikale Zentrierung

1. Bekannte Elementbreite und -höhe: absolute Positionierung+

   p{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

   p{
      width: 200px;
      height: 200px;
      background: green;

      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }

2. Bekannte Elementbreite und -höhe: absolute Positionierung+negativer Rand

3. Absolute+ Transformation

   p{
     width: 200px;
     height: 200px;
     background: green;

     position:absolute;
     left:50%;    /* 定位父级的50% */
     top:50%;
     transform: translate(-50%,-50%); /*自己的50% */
   }

4.flex + justify-content + align-items

.box{
   height:600px;  

   display:flex;
   justify-content:center;  //子元素水平居中
   align-items:center;      //子元素垂直居中
     /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
  .box>p{
    background: green;
    width: 200px;
    height: 200px;
  }

4. Welche Methoden gibt es zum Löschen von Floats und was sind ihre Vor- und Nachteile

Verwenden Sie das Clear-Attribut. Leere Elemente. Verwenden Sie ein leeres Element wie
• nach einem Float-Element und weisen Sie das <p class="clear"></p>-Attribut in CSS zu, um das Float zu bereinigen. Sie können zum Reinigen auch .clear{clear:both;} oder <br class="clear" /> verwenden. <hr class="clear" />

Vorteile: einfach, wenig Code schreiben, gute Kompatibilität. Nachteile: Das Hinzufügen nicht semantischer HTML-Elemente ist der Codesemantik nicht förderlich und die nachfolgenden Wartungskosten sind hoch

Verwenden Sie das Überlaufattribut von CSS, um
• oder overflow:hidden; zum Container des Floating-Elements hinzuzufügen, um den Float zu löschen. Darüber hinaus muss hasLayout in IE6 ausgelöst werden, z Containerbreite und -höhe oder Einstellung overflow:auto; für das übergeordnete Element. Nach dem Hinzufügen des Überlaufattributs kehrt das schwebende Element zur Containerebene zurück, wodurch die Höhe des Containers erhöht wird, wodurch der Effekt einer Bereinigung der schwebenden Elemente erzielt wird. zoom:1

Vorteile: einfach, weniger Code, gute Browserunterstützung Nachteile: kann nicht mit Position verwendet werden, da die überschüssige Größe ausgeblendet wird

overflow:hidden

Durch die Verwendung von CSSs :after-Pseudoelement in Kombination mit :after-Pseudoelement (beachten Sie, dass dies keine Pseudoklasse, sondern ein Pseudoelement ist, das das nächste Element nach einem Element darstellt) und IEhack kann es perfekt kompatibel sein alle wichtigen aktuellen Mainstream-Browser, hier bezieht sich der IEhack auf das Auslösen von hasLayout. Fügen Sie dem Container des Floating-Elements eine
• -Klasse hinzu und fügen Sie dieser Klasse dann ein :after-Pseudoelement hinzu, um am Ende des Elements ein unsichtbares Blockelement (Blockelement) hinzuzufügen und den Float zu bereinigen. Am Ende des internen Elements des Containers wird durch CSS-Pseudoelemente ein unsichtbares Leerzeichen „020“ oder ein Punkt „“ hinzugefügt, und das Clear-Attribut wird zum Löschen des Floats zugewiesen. Es ist zu beachten, dass für IE6- und IE7-Browser ein zoom:1; zur Clearfix-Klasse hinzugefügt werden muss, um haslayout auszulösen. clearfix

Vorteile: Gute Browserunterstützung, nicht anfällig für seltsame Probleme (derzeit: Wird von großen Websites wie Tencent, NetEase, Sina usw. verwendet). Nachteile: Viel Code, Nur durch die Kombination der beiden Codezeilen können Mainstream-Browser das

Festlegen der Höhe des übergeordneten Elements unterstützen

Einfach, weniger Code, einfach zu meistern Nachteile: Nur für Layouts mit fester Höhe geeignet

5. Was ist das Prinzip beim Erstellen eines Dreiecks mit reinem CSS

Vor dem Schreiben von Dreiecken? Sie waren direkt im Code steckengeblieben und haben die Gründe nicht untersucht. Erst als ich ein Vorstellungsgespräch hatte, bat mich der Interviewer, über das Prinzip der Erstellung eines Dreiecks mit CSS zu sprechen, also ... Als ich zurückkam, habe ich schnell die Informationen durchgesehen, die ich damals verstanden habe:

Schreiben Sie einen Grenzantrag, mit dem wir am besten vertraut sind

.box{
	width:100px;
	height:100px;
	border: 3px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

Der Effekt ist wie folgt:

2. Als nächstes erhöhen wir den Randwert

.box{
	width:100px;
	height:100px;
	border: 50px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

很容易发现, border渲染并不是正方形, 而是梯形的.

3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!

.box{
	width:0px;
	height:0px;
	border: 50px solid;
	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}

四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;

4. 设置透明, 隐藏其中三个三角形

 .box{
	width:0px;
	height:0px;
	border: 50px solid;
	border-color:transparent transparent transparent #ef4848;
}

三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的

.box{
	width:0px;
	height:0px;
	border: 50px solid transparent;
	border-left:50px solid #ef4848;
}

这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用

6. 实现三栏布局有哪些方法, 分别描述一下

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：

下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:

• Flex 布局

<style>
.container{
  display:flex;
  justify-content: center;
  height: 200px;
  background: #eee;
}
.left {
   width: 200px;
   background-color: red;
   height: 100%;
 }
.main {
    background-color: yellow;
    flex: 1;
}
.right {
    width: 200px;
    background-color: green;
}
</style>
<p class="container">
  <p class="left">1</p>
  <p class="main">2</p>
  <p class="right">3</p>
</p>

简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。

• 绝对定位布局

<style>
.container {
  position: relative;
  background:#eee;
  height:200px;
	}
.main {
  height: 200px;
  margin: 0 120px;
  background-color: yellow;
	}
.left {
  position: absolute;
  width: 100px;
  height: 200px;
  left: 0;
  top: 0;
  background-color: red;
	}
.right {
  position: absolute;
  width: 100px;
  height: 200px;
  background-color: green;
  right: 0;
  top: 0;
}
</style>

<p class="container">
  <p class="left">1</p>
  <p class="main">2</p>
  <p class="right">3</p>
</p>

这种方案也简单实用, 并且可以将 <p class="main"></p>元素放到第一位,使得主要内容优先加载!

• 双飞翼布局

<style>
.content {
  float: left;
  width: 100%;
}
.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: yellow;
}
.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: green;
}	

</style>
<p class="content">
  <p class="main"></p>
</p>
<p class="left"></p>
<p class="right"></p>

• 圣杯布局

<style>
.container {
  margin-left: 120px;
  margin-right: 220px;
}
.main {
  float: left;
  width: 100%;
  height: 300px;
  background-color: yellow;
}
.left {
  float: left;
  width: 100px;
  height: 300px;
  margin-left: -100%;
  position: relative;
  left: -120px;
  background-color: blue;
}
.right {
  float: left;
  width: 200px;
  height: 300px;
  margin-left: -200px;
  position: relative;
  right: -220px;
  background-color: green;
}
</style>
<p class="container">
  <p class="main"></p>
  <p class="left"></p>
  <p class="right"></p>
</p>

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。

7. css3实现0.5px的细线

<style>
.line {
    position: relative;
}
.line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>

<p class="line"></p>

8. link 与 @import 的区别

1. 从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

1. 加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

1. 兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

1. DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他

9. 开发中为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

10. Welche Möglichkeiten gibt es, CSS zu optimieren und die Leistung zu verbessern?

• Versuchen Sie, den Stil in eine separate CSS-Datei zu schreiben, im Head-Element darauf zu verweisen und zu schreiben Der Code in separaten CSS-Dateien hat mehrere Vorteile:
  1. Trennung von Inhalten und Stilen, einfach zu verwalten und zu warten
  2. Seitengröße reduzieren
  3. CSS-Dateien können zwischengespeichert und wiederverwendet werden 🎜 >
Verwenden Sie @import nicht.
• Vermeiden Sie die Verwendung komplexer Selektoren. Es wird empfohlen, die Verschachtelung von Selektoren nicht zu überschreiten drei Ebenen, wie zum Beispiel:
Optimieren Sie die Stildateien der Seite und entfernen Sie nicht verwendete Stile
• Verwenden Sie die CSS-Vererbung, um die Codemenge zu reduzieren
• Vermeiden! Wichtig, Sie können andere Selektoren auswählen

Empfohlene verwandte Tutorials:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt von10 hochfrequente Interviewfragen zu CSS in Web-Front-End-Interviews. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!