20 grundlegende CSS-Interviewfragen

Dieser Artikel teilt Ihnen hauptsächlich eine grundlegende CSS-Interviewfrage mit, die einen guten Referenzwert hat und ich hoffe, dass sie für alle hilfreich sein wird. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

1 Das Standard-CSS-Box-Modell einführen? Wie unterscheidet es sich vom Box-Modell niedrigerer IE-Versionen?

Standard-Boxmodell: Breite = Inhaltsbreite (Inhalt) + Rand + Polsterung + Rand
IE-Boxmodell der niedrigen Version: Breite = Inhaltsbreite (Inhalt + Rand + Polsterung) + Rand

Besondere Empfehlung: Zusammenfassung der CSS-Interviewfragen 2020 (aktuell)

Der Analysemodus, der zur Steuerung des Box-Modells des Elements verwendet wird, der Standardwert ist Content-Box
Context-Box: W3Cs Standard-Box-Modell, das Festlegen des Höhen-/Breitenattributs des Elements bezieht sich auf die Höhe/Breite des Inhaltsteils
border-box: IE traditionelles Boxmodell. Das Festlegen der Höhen-/Breitenattribute eines Elements bezieht sich auf die Höhe/Breite des Rahmens + der Polsterung + des Inhaltsteils

3 Was sind die CSS-Selektoren? Welche Eigenschaften können vererbt werden?

CSS-Selektoren: ID-Selektor (#myid), Klassenselektor (.myclassname), Tag-Selektor (p, h1, p), angrenzender Selektor (h1 + p), Untergeordneter Selektor (ul > li), Nachkommenselektor (li a), Platzhalterselektor (*), Attributselektor (a[rel=“external“]), Pseudoklassenselektor (a:hover, li:nth-child)

Vererbbare Eigenschaften: Schriftgröße, Schriftfamilie, Farbe

Nicht vererbbar Stil: Rahmen, Innenabstand, Rand, Breite, Höhe

Priorität (Proximity-Prinzip): !important > 🎜>
4 Wie wird der CSS-Prioritätsalgorithmus berechnet?

Elementselektor: 1Klassenselektor: 10ID-Selektor: 100

Element-Tag: 1000

!Der von important deklarierte Stil hat die höchste Priorität. Wenn ein Konflikt vorliegt, wird er erneut berechnet.

1. Wenn die Prioritäten gleich sind, wird der zuletzt vorkommende Stil ausgewählt.

2. Der geerbte Stil hat die niedrigste Priorität.

3. 5 Was sind die neuen Pseudoklassen in CSS3?

p:first -of -type wählt das erste Element aus, das zu seinem übergeordneten Element gehört.p:last-of-type wählt das letzte Element aus, das zu seinem übergeordneten Element gehört.p:only-of-type wählt das einzige Element aus, das dazu gehört zu seinem übergeordneten Element

p:only-child wählt das einzige untergeordnete Element aus, das zu seinem übergeordneten Element gehört

p:nth-child(2) wählt das zweite untergeordnete Element aus, das zu seinem übergeordneten Element gehört :enabled :disabled Der deaktivierte Status des Formularsteuerelements.
:checked Das Optionsfeld oder Kontrollkästchen ist aktiviert.




6 Wie zentriere ich p? Wie zentriere ich ein schwebendes Element? Wie zentriert man ein absolut positioniertes p?

p:

Oben, unten, links und rechts des Schwebebereichs zentrieren Elemente:

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

Absolute Positionierung links und rechts mittig:

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

还有更加优雅的居中方式就是用flexbox，以后会做整理。

7 display有哪些值？说明他们的作用?

inline（默认）–内联
none–隐藏
block–块显示
table–表格显示
list-item–项目列表
inline-block

8 position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

9 CSS3有哪些新特性？

1. RGBA和透明度

2. background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

3. word-wrap（对长的不可分割单词换行）word-wrap：break-word

4. 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）

5. font-face属性：定义自己的字体

6. 圆角（边框半径）：border-radius 属性用于创建圆角

7. 边框图片：border-image: url(border.png) 30 30 round

8. 盒阴影：box-shadow: 10px 10px 5px #888888

9. 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11 用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12 一个满屏品字布局如何设计?

第一种真正的品字：

1. 三块高宽是确定的；

2. 上面那块用margin: 0 auto;居中；

3. 下面两块用float或者inline-block不换行；

4. 用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。

13 常见的兼容性问题？

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3. 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

4. {
   background-color:#f1ee18;/*所有识别*/
   .background-color:#00deff\9; /*IE6、7、8识别*/
   +background-color:#a200ff;/*IE6、7识别*/
   _background-color:#1e0bd1;/*IE6识别*/
   }

5. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

6. IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

8. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14 为什么要初始化CSS样式

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

15 absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2. 否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

2. absolute: 向上找最近的定位为absolute/relative的元素

3. fixed: 它的containing block一律为根元素(html/body)

16 CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

1. chrome中，使用collapse值和使用hidden没有区别。

2. Firefox, Opera und IE, es gibt keinen Unterschied zwischen der Verwendung des Collapse-Werts und der Verwendung von display:none.

17 Was ist der Unterschied zwischen display:none und Visibility:hidden?

Anzeige: Keine zeigt das entsprechende Element nicht an und weist keinen Platz mehr im Dokumentlayout zu (Umfließen + Neuzeichnen)
Sichtbarkeit: Ausgeblendet blendet das entsprechende Element im aus Dokument Der ursprüngliche Platz bleibt im Layout erhalten (Neuzeichnung)

18 Was passiert, wenn Position, Anzeige, Überlauf und Float einander überlagern?

Das Anzeigeattribut gibt den Typ der Box an, den das Element generieren soll. Das Positionsattribut gibt den Positionierungstyp des Elements an in welche Richtung das Element schwebt.
Ähnlich dem Prioritätsmechanismus: Position: absolut/fest hat die höchste Priorität. Wenn sie vorhanden sind, funktioniert Float nicht und der Anzeigewert muss angepasst werden. Durch Float oder Absolut positionierte Elemente können nur Blockelemente oder Tabellen sein.

19 Verstehen Sie die BFC-Spezifikation (Blockformatierungskontext)?

BFC gibt an, wie die interne Blockbox angeordnet ist.
Positionierungsschema:

1. Die internen Boxen werden nacheinander in vertikaler Richtung platziert.

2. Der vertikale Abstand der Box wird durch den Rand bestimmt. Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, überlappen sich.

3. Die linke Seite des Randfelds jedes Elements berührt die linke Seite des enthaltenden Blockrahmenfelds.

4. Der BFC-Bereich überschneidet sich nicht mit der Float-Box.

5. BFC ist ein isolierter unabhängiger Container auf der Seite. Die Unterelemente innerhalb des Containers haben keinen Einfluss auf die äußeren Elemente.

6. Bei der Berechnung der Höhe von BFC werden auch schwebende Elemente in die Berechnung einbezogen.

BFC kann ausgelöst werden, wenn eine der folgenden Bedingungen erfüllt ist

1. Die Wurzel Element, das HTML ist

2. Der Wert von float ist nicht none (Standard)

3. Der Wert des Überlaufs ist nicht sichtbar (Standard)

4. Die Anzeigewerte sind Inline-Block, Table-Cell, Table-Caption

5. Position ist absolut oder fest

20 Warum erscheint Float und Wann muss es geräumt werden? Möglichkeit, den Schwimmer zu löschen?

Das schwebende Element stoppt, wenn es den Rand erreicht, der es enthält, oder den Rand des schwebenden Elements. Da sich das schwebende Element nicht im Dokumentfluss befindet, verhält sich die Dokumentflussblockbox so, als ob die schwebende Box nicht vorhanden wäre. Schwebende Elemente schweben auf der Blockbox des Dokumentenflusses. Durch Floating verursachte Probleme:


1. Die Höhe des übergeordneten Elements kann nicht erweitert werden, was sich auf Elemente auf derselben Ebene wie das übergeordnete Element auswirkt

2. Nicht schwebende Elemente (Inline-Elemente) auf der gleichen Ebene wie das schwebende Element folgen

3. Wenn es nicht das erste ist Wenn ein Element schwebend ist, müssen auch die Elemente davor schwebend sein, da dies sonst Auswirkungen auf die Struktur der Seitenanzeige hat.

Weg zum Löschen von Floats:

1. Parent p definiert die Höhe

2. Fügen Sie nach dem letzten schwebenden Element ein leeres p-Tag hinzu und fügen Sie den Stil „clear:both“ hinzu.

3. Fügen Sie dem übergeordneten Tag, das das schwebende Element enthält, einen Stilüberlauf zu „Ausgeblendet“ oder „Automatisch“ hinzu.

4. Übergeordnetes p definiert den Zoom

Verwandte Tutorial-Empfehlungen: CSS-Video-Tutorial

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