[Zusammenstellung und Weitergabe] 75 Hochfrequenztestpunkte in CSS für Front-End-Interviews

In diesem Artikel werden 75 hochfrequente Testpunkte in CSS für Front-End-Interviews zusammengefasst und mit Ihnen geteilt, um Studenten bei der Rekrutierung im Herbst zum Erfolg zu verhelfen. Beeilen Sie sich und sammeln Sie sie zum Lernen!

Theorie

1. Welche Funktion hat der Box-Sizing-Attributwert?

Wird verwendet, um den Parsing-Modus des Box-Modells des Elements zu steuern

, der Standardwert ist content-box

context-box: W3Cs Standard-Box-Modell, legen Sie das Höhen-/Breite-Attribut von fest Das Element, auf das verwiesen wird, ist die Höhe/Breite des Inhaltsteils.

• context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽

• border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content部分的高/宽

【学习视频分享：css视频教程、web前端】

2. absolute 绝对定位，是相对于谁的定位？

CSS position属性用于指定一个元素在文档中的定位方式。

absolute 的元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素进行定位，确定元素位置。绝对定位的元素可以设置外边距，且不会与其他边距合并。

3. 行内元素和块级元素有什么区别？

行内元素：一个行内元素只占据它对应标签的边框所包含的空间。

块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

区别：

• 是否另起一行：认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。

• 是否可设置宽高：块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。 而行内元素设置 width, height 无效。

• 是否可设置内外边距：块级元素都可，行内元素的水平方向的 padding-left/right, margin-left/right 都产生边距效果，但是竖直方向的 padding-top/bottom, margin-top/bottom 都不会产生边距效果。（也就是水平方向有效，竖直方向无效）

• 是否包含对方：块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

4. 常见的行内元素和块级元素有哪些？

1、常见的行内元素

<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img alt="[Zusammenstellung und Weitergabe] 75 Hochfrequenztestpunkte in CSS für Front-End-Interviews" ></select></textarea></button></abbr></small></b></strong></lable></a></span>

2、常见的块级元素

<div>、<p>、</p> <li>、<h1> ~ <h6>、</h6> </h1> <form>、<header>、<hr>、<ol>、</ol> <ul>、<article>、<aside>、<dd>、<dl> <code>border-box: IE traditionelles Boxmodell. Das Festlegen der Höhen-/Breitenattribute des Elements bezieht sich auf die Höhe/Breite des Rahmens + der Polsterung + des Inhaltsteils

【Teilen von Lernvideos: CSS-Video-Tutorial

, web front-end

】

2. absolute Absolute Positionierung ist relativ zu wem?

Mit der CSS-Positionseigenschaft wird angegeben, wie ein Element im Dokument positioniert wird.

absolute Elemente werden aus dem normalen Dokumentfluss verschoben und es wird kein Platz für das Element reserviert. Die Position des Elements wird durch die Positionierung des angegebenen Elements relativ zum nächsten

nicht statisch positionierten Vorgängerelement

bestimmt. Für absolut positionierte Elemente können Ränder festgelegt werden und sie werden nicht mit anderen Rändern zusammengeführt.
3. Was ist der Unterschied zwischen Inline-Elementen und Block-Level-Elementen?

Inline-Elemente:

Ein Inline-Element nimmt nur den Platz ein, der durch den Rand seiner entsprechenden Beschriftung enthalten ist.

Elemente auf Blockebene:

Ein Element auf Blockebene nimmt den gesamten Raum seines übergeordneten Elements (Containers) ein und erstellt so einen „Block“.

Unterschied:

Ob eine neue Zeile begonnen werden soll

: Standardmäßig beginnen Inline-Elemente nicht in einer neuen Zeile, Elemente auf Blockebene jedoch in einer neuen Zeile.

🎜🎜🎜🎜Ob Breite und Höhe festgelegt werden können🎜: Elemente auf Blockebene können die Breiten- und Höhenattribute festlegen. Hinweis: Auch wenn die Breite für Elemente auf Blockebene festgelegt ist, belegen sie immer noch eine exklusive Zeile. Die Einstellung von Breite und Höhe für Inline-Elemente ist ungültig. 🎜🎜🎜🎜🎜Ist es möglich, innere und äußere Ränder festzulegen?: Die horizontale Auffüllung links/rechts und der Rand links/rechts von Inline-Elementen erzeugen Randeffekte, die vertikale Auffüllung jedoch. top/bottom, margin-top/bottom erzeugt keine Randeffekte. (Das heißt, die horizontale Richtung ist gültig und die vertikale Richtung ist ungültig) 🎜🎜🎜🎜🎜Ob es das andere enthält 🎜: Elemente auf Blockebene können Inline-Elemente und Elemente auf Blockebene enthalten. Inline-Elemente dürfen keine Elemente auf Blockebene enthalten🎜🎜🎜

🎜4 Was sind die gemeinsamen Inline-Elemente und Elemente auf Blockebene? 🎜🎜🎜1. Gemeinsame Inline-Elemente🎜🎜<span>, <a>, <lable>, <strong>, <b>, <small>, <abbr>, &lt ; button>, <input>, <textarea>, <select>, <img alt="[Zusammenstellung und Weitergabe] 75 Hochfrequenztestpunkte in CSS für Front-End-Interviews" ></select></textarea></abbr></small></b></strong></lable></a></span>🎜🎜2 Gemeinsame Elemente auf Blockebene🎜🎜<div>, <p> </p> <li>, <h1> ~ <h6>, </h6> </h1> <form>, <hr>, <ol>, <article>, <aside> <dd>,<dl>🎜🎜🎜5. Wie erkennt man die vom Browser unterstützte Mindestschriftgröße? 🎜🎜🎜Sie können JS verwenden, um die DOM-Schriftart auf einen bestimmten Wert festzulegen und ihn dann zu entfernen. Wenn der Wert erfolgreich festgelegt wurde, bedeutet dies, dass er unterstützt wird. 🎜🎜🎜6. Was bedeutet „flex:1;“ in CSS? 🎜🎜🎜Flex ist die Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. 🎜🎜Zusätzlich zu den beiden Abkürzungswerten auto (1 1 auto) und none (0 0 auto) gibt es auch die folgenden Einstellungsmethoden: 🎜🎜🎜Wenn der Flex-Wert eine nicht negative Zahl ist, ist die Zahl der Flex-Grow-Wert, Flex-Shrink nimmt 1, Flex-Basis nimmt 0 %, die folgenden sind äquivalent: <pre class="brush:php;toolbar:false">.item {flex: 1;} .item {     flex-grow: 1;     flex-shrink: 1;     flex-basis: 0%; }</pre>🎜🎜Wenn der Flex-Wert 0 ist, sind die entsprechenden drei Werte 0 1 0%<pre class="brush:php;toolbar:false">.item {flex: 0;} .item {     flex-grow: 0;     flex-shrink: 1;     flex-basis: 0%; }</pre>🎜🎜🎜Für Weitere Schreibmethoden finden Sie unter 🎜MDN-flex🎜Ansicht 🎜🎜🎜7. Was sind CSS-Medienabfragen? 🎜🎜🎜Medienabfragen gibt es bereits in der CSS2-Ära und sind nach der Einführung von CSS3 leistungsfähiger geworden. 🎜🎜Einfach gesagt sind Medienabfragen eine Art Syntax zum Ändern von CSS Wenn es wirksam wird, können Sie durch die Einführung von Medienabfragen Ausdrücke hinzufügen, um die Medienumgebung für die Anwendung verschiedener Stylesheets zu bestimmen. Mit anderen Worten: Es ermöglicht uns, das Layout der Seite zu ändern, um es genau an verschiedene Geräte anzupassen, ohne den Inhalt zu ändern🎜<h2 data-id="heading-9"><strong>8. Was ist der Unterschied zwischen der Verwendung von Link und @import beim Importieren von Stilen auf einer Seite? </strong></h2> <ul> <li><p>Link ist ein HTML-Tag und @import wird von CSS bereitgestellt. </p></li> <li><p>Wenn die Seite geladen wird, wird gleichzeitig der Link geladen und das von @import referenzierte CSS wartet, bis die Seite geladen wird wird vor dem Laden geladen; </p></li> <li><p>link ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf, während @import nur in IE5 oder höher erkannt werden kann; </p></li> <li> <p></p>9. Warum unterstützt CSS keine übergeordneten Selektoren? </li> </ul> <h2 data-id="heading-10">Die Antwort auf diese Frage ist dieselbe wie „Warum unterstützt der CSS-Selektor für angrenzende Geschwister nur die folgenden Elemente und nicht die vorherigen Geschwisterelemente?“ <strong></strong>Der Browser analysiert das HTML-Dokument von vorne nach hinten, von außen nach innen. Daher kommt es häufig zu Ladesituationen, in denen zuerst der Seitenkopf und dann der Hauptinhalt erscheint. </h2> <p>Wenn CSS jedoch den übergeordneten Selektor unterstützt, müssen alle untergeordneten Elemente der Seite geladen werden, bevor das HTML-Dokument gerendert werden kann, da der sogenannte „übergeordnete Selektor“ bedeutet, dass sich untergeordnete Elemente auf übergeordnete Elemente auswirken wurden noch nicht geladen. Wie kann man den Stil von Vorgängerelementen beeinflussen? Dadurch wird die Wiedergabegeschwindigkeit der Webseite erheblich verlangsamt und der Browser verfügt über ein langes Whiteboard. Im Allgemeinen wird es durch den Rendering-Mechanismus von CSS und HTML selbst bestimmt. </p> <p></p>10. Für welche Szenarien eignen sich Rand und Polsterung? <p></p> <h2 data-id="heading-11">Wann Rand verwendet werden soll: <strong></strong> </h2>Es muss Platz außerhalb des Randes hinzugefügt werden. <p></p>Keine Hintergrundfarbe ist im Raum erforderlich. <ul> <li>Wenn der Abstand zwischen zwei nach oben und unten verbundenen Feldern ausgeglichen werden muss. </li> <li>Wann Polsterung verwendet werden soll: <li> </ul>Es muss ein Leerzeichen innerhalb des Randes hinzugefügt werden<p></p>Das Leerzeichen benötigt eine Hintergrundfarbe<ul> <li>Das Leerzeichen der beiden nach oben und unten verbundenen Kästchen, ich hoffe, es ist die Summe aus beiden. </li> <li> <li>11. Was sind die Anzeigewerte? </li> </ul> <h2 data-id="heading-12">Die häufigsten sind wie folgt:<strong></strong> </h2> <p></p>Wert<table> <thead>Beschreibung<tr class="firstRow"> <th align="center"></th> <th align="center"></th> </tr>Keine</thead> <tbody>Das Element wird nicht angezeigt als Block angezeigt Das Level-Element wird von diesem Element vorangestellt und gefolgt. Es gibt Zeilenumbrüche. <tr> <td align="center"></td> <td align="center">inline</td> </tr>Standard. Dieses Element wird als Inline-Element ohne Zeilenumbrüche vor oder nach dem Element angezeigt. <tr> <td align="center"></td> <td align="center">inline-block</td> </tr>Inline-Blockelement. Sie können Breite und Höhe festlegen und diese nebeneinander anzeigen. <tr> <td align="center"></td> <td align="center">inline-table</td> </tr>Dieses Element wird als Inline-Tabelle (ähnlich einer Tabelle) ohne Zeilenumbrüche vor und nach der Tabelle angezeigt. <tr> <td align="center"></td> <td align="center">Tabelle</td> </tr>Dieses Element wird als Tabelle auf Blockebene (ähnlich einer Tabelle) mit Zeilenumbrüchen vor und nach der Tabelle angezeigt. <tr> <td align="center"></td> <td align="center">inherit</td> </tr> gibt an, dass der Wert des Anzeigeattributs vom übergeordneten Element geerbt werden soll. <tr> <td align="center"></td> <td align="center">grid</td> </tr>Grid ist die leistungsstärkste CSS-Layoutlösung. Es unterteilt Webseiten in Raster und verschiedene Raster können beliebig kombiniert werden, um verschiedene Layouts zu erstellen. <tr> <td align="center"></td> <td align="center">flex</td> </tr>Flexibles Layout wird verwendet, um maximale Flexibilität für kastenförmige Modelle zu bieten. <tr> <td align="center"></td> <td align="center"> <p>其他的可以自行查阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" textvalue="MDN-display">MDN-display</a></p> <h2 data-id="heading-13"><strong>12. 两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？</strong></h2> <p>行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。</p> <p>解决方法：</p> <ul> <li>相邻元素代码代码全部写在一排</li> <li>浮动元素，float:left;</li> <li>在父级元素中用font-size:0;</li> </ul> <h2 data-id="heading-14"><strong>13. CSS 中，有哪些方式可以隐藏页面元素？有什么区别？</strong></h2> <p><strong>display:none</strong>：元素不可见，不占据空间，无法响应点击事件</p> <p><strong>visibility:hidden</strong>：元素不可见，占据页面空间，无法响应点击事件</p> <p><strong>opacity:0</strong>：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件</p> <p><strong>设置height、width属性为0</strong>：将元素的 margin，border，padding，height和width 等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素。特点：元素不可见，不占据页面空间，无法响应点击事件</p> <p><strong>position:absolute</strong>： 将元素移出可视区域，元素不可见，不影响页面布局</p> <p><strong>clip-path</strong>：通过裁剪的形式，元素不可见，占据页面空间，无法响应点击事件</p> <pre class="brush:php;toolbar:false">.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }</pre> <p>最常用的还是<code>display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

#	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

14. Warum müssen Frontend-Projekte CSS-Stile initialisieren?

Aufgrund von Browserkompatibilitätsproblemen haben verschiedene Browser unterschiedliche Standardwerte für Tags. Wenn das CSS des Browsers nicht initialisiert ist, ist die Anzeige derselben Seite in verschiedenen Browsern unterschiedlich.

15. Was ist der Unterschied zwischen „display:none“ und „visibility:hidden“?

In Bezug auf die Leistung verschwindet

• display:none vollständig und nimmt keinen Platz im Dokumentfluss ein, und der Browser analysiert das Element nicht;
• visibility:hidden verschwindet visuell, was verständlich ist als Transparenz von 0 Der Effekt besteht darin, einen Platz im Dokumentfluss einzunehmen, und der Browser analysiert das Element :none schaltet die Anzeige um, die Seite wird neu umbrochen (Wenn einige Elemente auf der Seite die Größe, das Layout, die Anzeige, das Ausblenden usw. ändern müssen, wird die Seite neu erstellt. Dies ist ein Umfluss (alle Seiten müssen einen Umfluss generieren, wenn sie werden zum ersten Mal geladen), und wenn die Sichtbarkeit wechselt, ob angezeigt werden soll oder nicht, wird kein Reflow verursacht.

16. Welche neuen Funktionen fügt CSS3 hinzu?

• Selektoren
: Universeller Geschwisterselektor, Pseudoklassenselektor, Pseudoelementselektor, negativer Selektor, Zustandspseudoklassenselektor

Neue Stile: Rahmen, Boxschatten, Hintergrund, Text, Farbe

border:

border-radius: Einen abgerundeten Rand erstellen

box-shadow: Einen Schatten zu einem Element hinzufügen

• border-image: Ein Bild verwenden, um einen Rand zu zeichnen
  • Background: Es wurden mehrere neue Attribute im Zusammenhang mit dem Hintergrund hinzugefügt, nämlich background-clip, background-origin, background-size und background- Pause
  • Text: Zeilenumbruch, Textüberlauf, Textschatten, Textdekoration

• background-clip、background-origin、background-size和background-break

• 文字：word-wrap、text-overflow、text-shadow、text-decoration

过渡：transition

转换：transform

动画：animation

其他：渐变、flex弹性布局、Grid栅格布局、媒体查询、混合模式等等...

17. 什么是硬件加速？

• 硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transitionÜbergang

  : Übergang

• Transformation

  : Transformation

• Animation

  : Animation

Sonstiges: Farbverlauf, flexelastisches Layout, Raster Rasterlayout, Medienabfrage, Mischmodus usw...

17. Was ist Hardwarebeschleunigung?

Hardwarebeschleunigung besteht darin, den Rendering-Prozess des Browsers an die GPU zu übergeben, anstatt den integrierten langsameren Renderer zu verwenden. Dadurch werden die Animation und der Übergang flüssiger.
Wir können CSS verwenden, um die Hardwarebeschleunigung im Browser zu aktivieren, um die Funktion der GPU (Graphics Processing Unit) zu ermöglichen und so die Leistung zu verbessern.
Die meisten Computergrafikkarten unterstützen jetzt Hardwarebeschleunigung. Vor diesem Hintergrund können wir die Leistung der GPU nutzen, um die Leistung unserer Website oder Anwendung zu verbessern.

18. Was ist der Unterschied zwischen Doppelpunkt und Einzelpunkt in ::before und :after? Erklären Sie, was sie tun?

Einzelner Doppelpunkt (::) wird für CSS3-Pseudoklassen verwendet. Im Allgemeinen entspricht er einigen speziellen Zuständen von Elementen, wie z. B. Hover, Link usw.

Doppelter Doppelpunkt (::) wird für CSS3 verwendet Pseudoelemente (Pseudoelemente) Bestehend aus Doppelpunkten und Pseudoelementnamen. Pseudoelemente stimmen im Allgemeinen mit speziellen Positionen überein, z. B. nach, vor usw.

Die im neuen CSS3 eingeführten Pseudoelemente dürfen die alte Schreibmethode mit einem Doppelpunkt nicht mehr unterstützen

🎜Wenn Sie möchten, dass der eingefügte Inhalt vor anderen Inhalten angezeigt wird, verwenden Sie ::before, andernfalls verwenden Sie ::after In Bezug auf die Codereihenfolge ist der von ::after generierte Inhalt auch später als der von ::before generierte Inhalt. 🎜🎜🎜Ich glaube, dass die meisten Anfänger denken werden, dass die CSS-Übereinstimmung von links nach rechts erfolgt, aber in Wirklichkeit ist das Gegenteil der Fall. 🎜🎜CSS-Abgleich erfolgt, wenn der Renderbaum erstellt wird (Chrome Dev Tools ordnet ihn dem Layoutprozess zu). Zu diesem Zeitpunkt hat der Browser das DOM erstellt und den CSS-Stil erhalten. Zu diesem Zeitpunkt muss der Stil mit den Knoten im DOM abgeglichen werden, um die Leistung zu verbessern . 🎜🎜Stellen wir zunächst klar, dass der Browser nach der entsprechenden Regel für einen „sichtbaren“ Knoten sucht. Dies unterscheidet sich vom jQuery-Selektor. Letzterer verwendet eine Regel, um den entsprechenden Knoten zu finden von links nach rechts. Aufgrund der enormen Größe von CSS kann eine CSS-Datei jedoch Tausende von Regeln enthalten, und für den aktuellen Knoten können die meisten Regeln nicht abgeglichen werden. Wenn Sie einen Moment darüber nachdenken, werden Sie es wissen Wenn Sie von rechts aus mit dem Matching beginnen (auch von einer genaueren Position), können die meisten ungeeigneten Knoten schneller entfernt werden. Wenn Sie von links beginnen, werden Sie den Matching-Fehler erst finden, wenn Sie tiefer gehen . Wenn die meisten Regeln tiefer liegen, ist das eine Verschwendung von Ressourcen. 🎜🎜Zusätzlich zum oben Gesagten haben wir bereits erwähnt, dass die DOM-Konstruktion „Schritt für Schritt“ erfolgt und DOM die Render-Tree-Konstruktion nicht blockiert (nur CSSOM-Blöcke), was auch das frühere Rendern von Elementen ermöglichen soll Seite. 🎜🎜Stellen Sie sich die folgende Situation vor: Wenn wir zu diesem Zeitpunkt nur einen Teil des DOM erstellen und das CSSOM abgeschlossen ist, erstellt der Browser den Renderbaum. 🎜

Wenn zu diesem Zeitpunkt für jeden Knoten eine Regel gefunden wird, die von rechts nach links übereinstimmt, müssen wir nur beobachten, ob der übergeordnete Knoten des Knotens Schicht für Schicht übereinstimmt, und sein übergeordneter Knoten muss sich bereits im DOM befinden diesmal.

Aber umgekehrt können wir einen Knoten abgleichen, der noch nicht im DOM vorhanden ist, und der Abgleichsprozess verschwendet zu diesem Zeitpunkt Ressourcen.

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

• Übermäßige Einschränkungen vermeiden

• Nachkommenselektoren vermeiden

• Kettenselektoren vermeiden

• Kompakte Syntax verwenden

• Unnötige Namespaces vermeiden

• Vermeiden Sie unnötige Wiederholungen von

• Am besten verwenden Sie semantische Namen. Ein guter Klassenname sollte beschreiben, was er ist, und nicht wie er aussieht

21. Was ist der Unterschied, wenn das Style-Tag vor oder nach dem Text geschrieben wird?

• Das Laden der Seite erfolgt von oben nach unten. Natürlich wird zuerst der Stil geladen.
• Geschrieben nach dem Body-Tag. Da der Browser das HTML-Dokument Zeile für Zeile analysiert, führt das Parsen des am Ende geschriebenen Stylesheets (Gliederung oder im Style-Tag geschrieben) dazu, dass der Browser das vorherige Rendern stoppt und auf das Laden wartet. Nach dem Parsen des Stylesheets und dem erneuten Rendern kann unter Windows IE das FOUC-Phänomen auftreten (d. h. das durch Stilfehler verursachte Seitenflackerproblem)

22 Ist die vertikale prozentuale Einstellung des Elements im Verhältnis zur Höhe des Containers ?

Wenn Sie die Breite eines Elements prozentual festlegen, wird sie relativ zur Breite des übergeordneten Containers berechnet. Bei einigen Eigenschaften, die den vertikalen Abstand darstellen, wie z. B. padding-top, padding-bottom, margin-top, margin -bottom usw. basieren bei der prozentualen Festlegung ebenfalls auf der Breite des übergeordneten Containers und nicht auf der Höhe.

23. Was ist der Unterschied zwischen Übergang und Animation?

transition ist ein Übergangsattribut, dessen Implementierung ein Ereignis (z. B. Mausbewegung, Fokus, Klick usw.) auslösen muss, bevor die Animation ausgeführt wird. Es ähnelt einer Flash-Tweening-Animation und legt einen Start-Keyframe und einen End-Keyframe fest.

animation ist ein Animationsattribut, für dessen Implementierung keine auslösenden Ereignisse erforderlich sind. Es kann nach dem Festlegen der Zeit selbst ausgeführt werden und eine Animation kann in einer Schleife ausgeführt werden. Es ähnelt auch der Flash-Tween-Animation, kann jedoch mehrere Keyframes (definiert mit @keyframe) festlegen, um die Animation abzuschließen.

24. Erzählen Sie mir von Ihrem Verständnis des Box-Modells?

• Beim Layout eines Dokuments stellt die Rendering-Engine des Browsers alle Elemente als rechteckige Boxen dar, basierend auf einem der Standards, dem CSS-Basis-Boxmodell. transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

• animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

24. 说说你对盒子模型的理解？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

标准盒子模型：标准盒子模型，是浏览器默认的盒子模型

从上图可以看到：

• 盒子总宽度 = width + padding + border + margin;
• 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border 值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

IE 怪异盒子模型

从上图可以看到：

• 盒子总宽度 = width + margin;
• 盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border 

Eine Box besteht aus vier Teilen: content, padding, border, margin

Standard-Box-Modell

: Standard-Box-Modell, das das Standard-Box-Modell des Browsers ist

Wie du Sie können dem Bild oben entnehmen:

Die Gesamtbreite der Box = Breite + Innenabstand + Rand + Rand;

Die Gesamthöhe der Box = Höhe + Innenabstand + Rand + Rand

• Das heißt width/height ist nur die Inhaltshöhe und enthält keine padding- und border -Werte
• Also legen Sie in der obigen Frage fest Die Breite beträgt 200 Pixel, aber aufgrund des Vorhandenseins von padding beträgt die tatsächliche Breite der Box 240 Pixel. img.php .cn/upload/image/590/447/875/1666887581602320.png" title="1666887581602320.png" alt="[Zusammenstellung und Weitergabe] 75 Hochfrequenztestpunkte in CSS für Front-End-Interviews"/>
  Wie Sie auf dem Bild oben sehen können:

Die Gesamtbreite der Box = Breite + Rand;Die Gesamthöhe der Box = Höhe + Rand;

• Das heißt, width/height enthält den padding und border-Werte

25 Was ist Atom CSS? Was sind die Vor- und Nachteile?

• Atom CSS: Atomic CSS bedeutet, dass eine Klasse nur eine Sache tut. 🎜🎜Im Gegensatz zu häufig verwendeten Regeln wie BEM ist atomares CSS aufgeteilt und alle CSS-Klassen haben eine eindeutige CSS-Regel. 🎜🎜🎜Vorteile: Reduziert die Größe von CSS und verbessert die Wiederverwendung von CSS Benennung🎜🎜🎜🎜🎜Nachteile🎜🎜🎜🎜🎜Erhöht die Speicherkosten. Nachdem Sie CSS in Atome aufgeteilt haben, müssen Sie sich vor dem Schreiben einige Klassen merken. Auch wenn tailwindcss eine vollständige Werkzeugkette bereitstellt, müssen Sie beim Schreiben von Hintergrund daran denken, dass der Anfang bg ist. 🎜🎜🎜🎜 Erhöht die Komplexität der HTML-Struktur. Wenn das gesamte DOM über solche Klassennamen verfügt, führt dies unweigerlich zu Problemen beim Debuggen. Manchmal ist es schwierig, bestimmte CSS-Probleme zu finden

• 你仍需要起class名。对于大部分属性而言，你可以只用到center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如left，top，这时候你还需要起一个class名

26. 脱离文档流有哪些方法？

• float：使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

• absolute：absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

• fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）

27. CSSOM树和DOM树是同时解析的吗？

浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。

28. CSS Sprites 是什么，如何使用？

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

优点：

• 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
• 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
• 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

缺点：

• 图片合成比较麻烦；
• 背景设置时，需要得到每一个背景单元的精确位置；
• 维护合成图片时，最好只是往下加图片，而不要更改已有图片。

29. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

30. canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

• canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。

• 而style的width和height是canvas在浏览器中被渲染的高度和宽度。

• 如果canvas的width和height没指定或值不正确，就被设置成默认值。

31. 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input> <input>

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题

这种表现是符合规范的应该有的表现。

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，以下展示几种方法去掉

• 移除空格：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了

• 使用margin负值

  .space a { 
      display: inline-block; 
      margin-right: -3px; 
  }

• 使用font-size:0

  .space { font-size: 0; } 
  .space a { font-size: 12px; }

• 使用letter-spacing

  .space { letter-spacing: -3px; } 
  .space a { letter-spacing: 0; }

• 使用word-spacing

  .space { word-spacing: -6px; } 
  .space a { word-spacing: 0; }

32. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

它们的优点？

• 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。

• 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

33. CSS3 新增伪类有哪些？

• p:first-of-type 选择属于其父元素的首个元素
• p:last-of-type 选择属于其父元素的最后元素
• p:only-of-type 选择属于其父元素唯一的元素
• p:only-child 选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中
• ...

34. CSS 动画和 JS 实现动画分别有哪些优缺点？

1. CSS动画

优点

• 浏览器可以对动画进行优化
• 代码相对简单,性能调优方向固定
• 对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

• 运行过程控制较弱,无法附加事件绑定回调函数
• 代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

2. JS 动画

优点

• 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
• 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
• CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

• 代码的复杂度高于CSS动画
• JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

35. 为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

什么是浮动：浮动（float）最初是为了让文字环绕图片排布，就想报纸上面的图文混排模式。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

什么时候需要清除浮动：

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

• 父级div定义height
• 最后一个浮动元素后加空div标签 并添加样式clear:both。
• 包含浮动元素的父标签添加样式overflow为hidden或auto。
• 父级div定义zoom

36. IconFont 的原理是什么？

IconFont 的使用原理来自于 css 的 @font-face 属性。

这个属性用来定义一个新的字体，基本用法如下：

@font-face { 
    font-family: <yourfontname>; 
    src: <url> [<format>],[<source> [<format>]], *; 
    [font-weight: <weight>]; 
    [font-style: <style>]; 
}</style></weight></format></source></format></url></yourfontname>

• font-family：为载入的字体取名字。
• src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
• font-weight：定义加粗样式。
• font-style：定义字体样式。

37. 分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景

可以从以下三点进行分析

1. 结构

• display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
• visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
• opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2. 继承

• display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
• visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。

3. 性能

• display: none: 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
• visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
• opacity: 0:修改元素会造成重绘，性能消耗较少

38. CSS 中有哪些定位方式？（position有哪些属性值？）

static: 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。

relative: 相对定位方式，相对于其原来的位置进行定位。会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

absolute: 绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。

fixed: 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。 当父元素使用了transform的时候，会以父元素定位。

sticky: 粘性定位，可以简单理解为relative和fixed布局的混合。当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的，它的定位效果完全受限于父级元素们。

39. flexbox(弹性盒布局模型)是什么，使用什么场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每根轴都有起点和终点，这对于元素的对齐非常重要

关于flex常用的属性，我们可以划分为容器属性和容器成员属性

容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

容器成员属性有： order、flex-grow、flex-shrink、flex-basis、flex、align-self

更多属性写法可前往 MDN-flex 查看

40. Wann wird das Z-Index-Attribut ungültig?

Normalerweise wird der Z-Index verwendet, wenn zwei überlappende Beschriftungen vorhanden sind. Unter bestimmten Umständen kann gesteuert werden, dass eine davon über oder unter der anderen angezeigt wird. Je größer der Z-Index-Wert ist, desto höher ist er. Das Positionsattribut des Z-Index-Elements muss relativ, absolut oder fest sein.

Das Z-Index-Attribut ist unter den folgenden Umständen ungültig:

• Wenn die Position des übergeordneten Elements relativ ist, ist der Z-Index des untergeordneten Elements ungültig. Lösung: Ändern Sie die Position des übergeordneten Elements in „absolut“ oder „statisch“. Das

• -Element setzt das Positionsattribut nicht auf ein nicht statisches Attribut. Lösung: Stellen Sie das Positionsattribut des Elements auf „relativ“, „absolut“ oder „fest“ ein. Das

• -Element legt beim Festlegen des Z-Index auch Float fest. Lösung: Float entfernen und zu display: inline-block;

41 wechseln. Wie löst man BFC aus und welche Anwendungsszenarien gibt es?

Klicken Sie hier, um zu gelangen: Eine kurze Diskussion von BFC zum Front-End-Layout

42 Wird das Laden von CSS zu Blockierungen führen?

Lassen Sie mich zunächst die Schlussfolgerung ziehen:

• Das Laden von CSS blockiert nicht das Parsen des DOM-Baums.
• Das Laden von CSS blockiert das Rendern des DOM-Baums.
• Das Laden von CSS blockiert die Ausführung nachfolgender JS-Anweisungen.

Um zu vermeiden, dass Benutzer längere Zeit einen weißen Bildschirm sehen, sollten wir die CSS-Ladegeschwindigkeit so weit wie möglich verbessern. Sie können beispielsweise die folgenden Methoden verwenden:

• Verwenden Sie CDN (da das CDN auswählt Der nächstgelegene zwischengespeicherte Inhalt für Sie basierend auf Ihren Netzwerkbedingungen. Der Knoten stellt Ihnen Ressourcen zur Verfügung, sodass die Ladezeit verkürzt werden kann.

• Komprimieren Sie das CSS (Sie können viele Verpackungstools wie Webpack, Gulp usw. verwenden. , oder Sie können die GZIP-Komprimierung aktivieren)

• Verwenden Sie den Cache vernünftig ( Es ist gut, Cache-Kontrolle, Ablaufdatum und E-Tag festzulegen, aber Sie sollten Folgendes beachten: Nachdem die Datei aktualisiert wurde, müssen Sie dies vermeiden Die Auswirkungen des Cachings. Eine der Lösungen besteht darin, nach dem Dateinamen eine Versionsnummer hinzuzufügen dass sie nicht zwischengespeichert werden können)

• 43. Sprechen Sie kurz über den Browser-Rendering-Prozess

Der Prozess des Browser-Renderings ist wie folgt:

HTML analysiert Dateien, um einen DOM-Baum zu generieren, und analysiert CSS-Dateien, um einen CSSOM-Baum zu generieren

• Kombinieren Sie Dom Tree und CSSOM Tree, um einen Render Tree zu generieren

• Rendern und zeichnen Sie entsprechend dem Render Tree und rendern Sie Pixel auf dem Bildschirm.

• Wir können aus dem Prozess erkennen:

DOM-Parsing und CSS-Parsing sind zwei parallele Prozesse, daher erklärt dies auch, warum das Laden von CSS das DOM-Parsing nicht blockiert.

• Da der Render-Baum jedoch vom DOM-Baum und dem CSSOM-Baum abhängt, muss er warten, bis der CSSOM-Baum erstellt ist, d. h. die CSS-Ressource geladen ist (oder die CSS-Ressource nicht geladen werden kann), bevor er gestartet werden kann Rendern. Daher blockiert das Laden von CSS das Dom-Rendering.

• Da JS möglicherweise auf früheren Dom-Knoten und CSS-Stilen ausgeführt wird, behält der Browser die Reihenfolge von CSS und JS in HTML bei. Daher wird das Stylesheet geladen und ausgeführt, bevor die nachfolgenden js ausgeführt werden. Daher blockiert CSS die Ausführung nachfolgender JS.

• 44. Wie wirken sich JS und CSS auf die DOM-Baumkonstruktion aus?

Klicken Sie hier, um zu gehen: Wie wirken sich JS und CSS auf die DOM-Baumkonstruktion aus?

45. Wie versteht man Reflow und Neuzeichnen? Unter welchen Umständen wird es ausgelöst?

Klicken Sie hier, um zu: „Reflow und Neuzeichnen“ der Frontend-Seite zu gelangen

46. Was ist responsives Design? Was sind die Grundprinzipien des responsiven Designs? Wie kann man es umsetzen?

Was ist: Responsive Webdesign ist ein Webseiten-Design-Layout. Das Design und die Entwicklung der Seite sollten auf dem Benutzerverhalten und der Geräteumgebung (Systemplattform, Bildschirmgröße, Bildschirmausrichtung usw.) basieren. Reaktion und Anpassung

Der bekannteste Satz, der die responsive Oberfläche beschreibt, lautet „Inhalt ist wie Wasser“. Der Volksmund lautet „Wenn Sie sich den Bildschirm als Behälter vorstellen, dann ist der Inhalt wie Wasser“Gemeinsame Merkmale responsiver Websites:

Passt sich gleichzeitig an PC + Tablet + Mobiltelefon an

Die Tab-Navigation ändert sich zur klassischen Schubladennavigation, wenn man sich dem Handheld-Endgerät nähert

• Das Layout der Website passt die Größe und Position des Moduls entsprechend dem Ansichtsfenster an
• Grundprinzip:
Das Grundprinzip des responsiven Designs besteht darin, unterschiedliche Bildschirmgrößen von Geräten durch Medienabfragen zur Verarbeitung zu erkennen Die Implementierung von Responsive Design denkt normalerweise unter folgenden Gesichtspunkten:

• 弹性盒子（包括图片、表格、视频）和媒体查询等技术
• 使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
• 使用相对单位使得内容自适应调节
• 选择断点，针对不同断点实现不同布局和内容展示

总结：

响应式布局优点：

• 面对不同分辨率设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点：

• 仅适用布局、信息、框架并不复杂的部门类型网站
• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长
• 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
• 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

47. 说说对 CSS 预编语言的理解，主流的有哪些？

理解： 预处理语言扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易维护、方便。本质上，预处理是css的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 css 文件

有哪些： css预编译语言在前端里面有三大优秀的预编处理器，分别是：sass、less、stylus

48. CSS 中1像素问题是什么？有哪些解决方案？

1px边框问题由来： 苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。

像这种像素比（像素比（即dpr）＝ 物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。

而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

解决方案：使用 transform 解决

通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

这样就可以得到 0.5px 的边框。

还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。

49. overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling: touch;

是因为这行代码启用了硬件加速特性，所以滑动很流畅。

50. CSS 单位中 px、em 和 rem 的区别？

• px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一 个虚拟长度单位，是计算机系统的数字化图像长度单位

• em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大 小，因此并不是一个固定的值

• rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字 体大小时，仍然是相对大小，但相对的只是 HTML 根元素

区别： IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐 层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

51. Wie verwende ich CSS, um die Seitenleistung zu verbessern?

Klicken Sie hier, um zu gehen: Wie verwende ich CSS, um die Seitenleistung zu verbessern?

52. Was ist der Unterschied zwischen Buchstabenabstand und Wortabstand?

letter-spacing funktioniert bei allen Zeichen, word-spacing funktioniert jedoch nur bei Leerzeichen. Mit anderen Worten: Die Rolle des Wortabstands besteht darin, die Lückenbreite von Leerzeichen zu vergrößern. letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度。

53. 无依赖绝对定位是什么？

没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

54. 层叠准则？

（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

55. font-weight 的特殊性？

如果使用数值作为font-weight属性值，必须是100～900的整百数。因为这里的数值仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。

56. text-indent 的特殊性？

（1）text-indent 仅对第一行内联盒子内容有效。

（2）非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent值无效，如果计算值 inline-block/inline-table 则会生效。

（3）<input>标签按钮 text-indent 值无效。

（4）<button></button>

53 Was ist abhängigkeitsfreie absolute Positionierung?

Absolute Positionierung ohne Festlegung der Attributwerte links/oben/rechts/unten wird als „abhängigkeitsfreie absolute Positionierung“ bezeichnet. Die Position der abhängigkeitsfreien absoluten Positionierung hängt von der Position ab, wenn position:absolute nicht festgelegt ist.

54.

(1) Wer ist größer: Wenn im selben Stapelkontextfeld eine offensichtliche Stapelebenenkennung vorhanden ist, z. B. der effektive Z-Index-Attributwert, deckt die mit einem größeren Stapelebenenwert die kleinere ab.

(2) Von hinten kommend: Wenn die Stapelebenen der Elemente konsistent sind und die Stapelreihenfolge gleich ist, überschreiben die Elemente hinten im DOM-Fluss die vorherigen Elemente.

55 Was ist das Besondere an der Schriftstärke?

Wenn Sie einen numerischen Wert als font-weight-Attributwert verwenden, muss dieser eine Ganzzahl zwischen 100 und 900 sein. Da der Zahlenwert hier nur wie ein Zahlenwert aussieht, handelt es sich tatsächlich um ein Schlüsselwort mit einer bestimmten Bedeutung, und hier besteht eine entsprechende Beziehung zwischen dem Zahlenschlüsselwort und dem Buchstabenschlüsselwort.

56 Was sind die Besonderheiten von text-indent?

(1) text-indent ist nur für die erste Zeile des Inline-Box-Inhalts gültig.

(2) Das Festlegen des Texteinzugswerts für andere Inline-Elemente als nicht ersetzte Elemente, deren berechneter Anzeigewert Inline ist, ist ungültig. Wenn der berechnete Wert Inline-Block/Inline-Tabelle ist, wird er wirksam.

(3) Der Texteinzugswert der Beschriftungsschaltfläche <input> ist ungültig.

(4)<button></button>Der Texteinzugswert der Beschriftungsschaltfläche ist gültig.

(5) Der Prozentwert von text-indent wird relativ zum „enthaltenden Block“ des aktuellen Elements berechnet, nicht zum aktuellen Element.

57. Was sind die Vor- und Nachteile der Verwendung von rem-Layout?

Vorteile:

In Zeiten sehr unterschiedlicher Bildschirmauflösungen kann die Gesamtskalierung der Seite erreicht werden, solange rem mit der Bildschirmauflösung verknüpft ist, wodurch die Anzeige auf dem Gerät vereinheitlicht wird. Darüber hinaus unterstützen die meisten Browser mittlerweile rem und die Kompatibilität ist ebenfalls sehr gut.

Nachteile:

(1) Die Leistung ist auf seltsamen DPR-Geräten nicht sehr gut. Beispielsweise kann es bei einigen High-End-Modellen von Huawei zu Verwirrung kommen, wenn das Rem-Layout verwendet wird.

(2) Es wird auch Probleme bei der Verwendung von Iframe-Referenzen geben.

(3) rem steht bei der Anpassung an mehrere Bildschirmgrößen im Widerspruch zu den Designphilosophien der beiden aktuellen großen Plattformen. Das heißt, ob die Entstehung großer Bildschirme dazu dient, größere und klarere Dinge zu sehen oder mehr zu sehen. Frage.

58. Was ist die bevorzugte Mindestbreite?

„Bevorzugte Mindestbreite“ bezieht sich auf die Mindestbreite, bei der ein Element am besten geeignet ist. Die Mindestbreite für ostasiatische Schriften (z. B. Chinesisch) ist die Breite jedes chinesischen Zeichens. Die Mindestbreite westlicher Texte wird durch eine bestimmte fortlaufende Einheit englischer Zeichen bestimmt. Nicht alle englischen Zeichen bilden fortlaufende Einheiten und enden im Allgemeinen mit Leerzeichen (normalen Leerzeichen), Bindestrichen, Fragezeichen und anderen nicht-englischen Zeichen. 🎜🎜Wenn Sie möchten, dass englische Zeichen mit chinesischen Zeichen identisch sind und jedes Zeichen die Mindestbreiteneinheit verwendet, können Sie versuchen, word-break:break-all in CSS zu verwenden. 🎜🎜🎜59. Warum ist height:100 % ungültig? 🎜🎜🎜Damit der prozentuale Höhenwert für Elemente im normalen Dokumentenfluss funktioniert, muss das übergeordnete Element einen Höhenwert haben, der wirksam werden kann. 🎜🎜Der Grund dafür ist, dass der berechnete Wert automatisch ist, wenn die Höhe des enthaltenden Blocks nicht explizit angegeben wird (dh die Höhe wird durch den Inhalt bestimmt). , kann es nicht an der Berechnung teilnehmen. 🎜🎜Elemente mit absoluter Positionierung haben einen berechneten Wert, auch wenn die Höhe des Vorgängerelements automatisch berechnet wird. 🎜🎜🎜60. Regeln zwischen den Attributen „min-width/max-width“ und „min-height/max-height“ überschreiben? 🎜🎜🎜(1) max-width überschreibt die Breite, auch wenn width ein Zeilenstil ist oder !important festgelegt ist. 🎜🎜(2) Die minimale Breite überschreibt die maximale Breite. Diese Regel tritt auf, wenn ein Konflikt zwischen minimaler und maximaler Breite auftritt. 🎜🎜🎜61. Was ist das Inline-Box-Modell? 🎜🎜🎜 (1) Inhaltsbereich. Der Inhaltsbereich bezieht sich auf ein unsichtbares Feld, das den Text umgibt. Seine Größe wird nur durch die Eigenschaften des Zeichens selbst gesteuert. Es handelt sich im Wesentlichen um ein Zeichenfeld. (Zeichenfeld); aber für einige Elemente, wie z. B. Ersatzelemente wie Bilder, ist der Inhalt offensichtlich kein Text, und daher gibt es für diese kein Zeichenfeld Element, der Inhaltsbereich kann als Element selbst betrachtet werden. 🎜

（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒 子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（line box），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containing box），由一行一行的“行框盒子”组成。

62. content 与替换元素的关系？

content属性生成的对象称为“匿名替换元素”。

（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值无法获取。

63. margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。

（2）如果两侧均是auto，则平分剩余空间。

64. overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度 高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

代码篇

1. 下面代码中，p标签的背景色是什么？

<style>
     #parent p { background-color: red;  }
      div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;  
</style>
......
<div>
     <div>
         <p>xxxx</p>
     </div>
</div>

大家需要注意，权重是按优先级进行比较的，而不是相加规则。

答案：red。

2. 假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效？

body#god div.dad span.son {
    width: 200px;
}
body#god span#test {
    width: 250px;
}

本题考察css的样式优先级权重，大家需要记住：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。 所以本题的分析思路是：

• 先比较高权重位，即第一个样式的高权重为 #god = 100
• 第二个样式的高权重为 #god + #text = 200
• 100
• 所以最终计算结果是取 width: 250px;
• 若两个样式的高权重数量一样的话，则需要比较下一个高权重！

答案：width: 250px;

3. 第二个子元素的高度是多少？

<div>
    <div></div>
    <div></div>
</div>
<style>
    .container{
        display: flex;
    }
    .container > div {
        width: 100px;
    }
</style>

Flex 布局会默认：

• 把所有子项变成水平排列。
• 默认不自动换行。
• 让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

答案：100px

手写篇

1. 如何从 html 元素继承 box-sizing

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

2. 如何使用css来实现禁止移动端页面的足有滑动手势？

最简单的方法：

html { 
    touch-action: none; 
    touch-action: pan-y; 
}

还可以直接指定对应元素的宽度和overflow：

html { 
    width: 100vw; 
    overflow-x: hidden; 
}

3. 如何使用 CSS 画一个三角形

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

4. 如何实现两栏布局，右侧自适应？三栏布局中间自适应？

两栏布局

浮动实现

  <style>
    .box{
       overflow: hidden; 
    }
    .left {
       float: left;
       width: 200px;
       background-color: gray;
       height: 400px;
    }
    .right {
       margin-left: 210px;
       background-color: lightgray;
       height: 200px;
    }
</style>
<div>
    <div>左边</div>
    <div>右边</div>
</div>

flex实现

  <style>
    .box{
       display: flex;
    }
    .left {
       width: 100px;
       background-color: skyblue;
       height: 400px;
    }
    .right {
       flex: 1;
       background-color: pink;
       height: 200px;
    }
  </style>
  <div>
    <div>左边</div>
    <div>右边</div>
  </div>

三栏布局

  <style>
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 500px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
  </style>
  <div>
    <div>左侧</div>
    <div>中间</div>
    <div>右侧</div>
  </div>

5. 单行文本如何实现两端对齐

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

<style>
//scss
  .item {
      height: 32px;
      line-height: 32px;
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: justify;
          vertical-align: top;
          &::after {
              display: inline-block;
              width: 100%;
              content: &#39;&#39;;
              height: 0;
          }
      }
      .value {
          padding-right: 10px;
      }
  }
</style>
  <div>
    <span>哈哈哈</span>：
    <span>哈哈哈</span>
  </div>

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

   //scss
  .item {
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          min-width: 100px;
          text-align: justify;
          text-align-last: justify;
      }
      .value {
          padding-right: 10px;
      }
  }

6. 使用 CSS 实现一个无限循环动画

  <style>
   .anima {
      width: 800px;
      height: 600px;
      animation-name: likes; 
      animation-direction: alternate; 
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-duration: 1s; 
    }

  @keyframes likes {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.9);
    }
    50%{
        transform: scale(0.85);
    }
    75%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
  }
  </style>
  <image></image>

7. 如何实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

<style>
   div {
      width: 100px;
      height: 100px;
      /* 溢出隐藏 */
      overflow: hidden;           
      /* 溢出用省略号显示 */
      text-overflow: ellipsis;   
      /* 规定段落中的文本不进行换行   */
      white-space: nowrap;  
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

多行文本溢出隐藏

<style>
   div {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 显示的行数 */
      -webkit-line-clamp: 3;
      /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
      -webkit-box-orient: vertical;
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

8. CSS 垂直居中有哪些实现方式？

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

下面为公共代码：

<style>
.box {
  width: 300px;
  height: 300px;
  background: #ddd;
}
.small {
  background: red;
}
</style>


    <div>
        <div>small</div>
    </div>

1. absolute + margin实现

方法一：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
  }

方法二：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
  }

2. absolute + calc 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
  }

3. absolute + transform 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100px;
    height: 100px;
  }

4. 转行内元素

  .box {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
  }
  .small {
    padding: 6px 10px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
  }

5. 使用flex

方法一：

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

方法二：

  .box {
    display: flex;
    justify-content: center;
  }
  .small {
    align-self: center;
  }

更多编程相关知识，请访问：编程视频！！