Dernières questions d'entrevue frontale de 2018 11

Cette fois, je vous présente les dernières questions d'entretien front-end en 2018. Nous savons que les entretiens sont une partie indispensable du travail front-end. Cette fois, les questions d'entretien front-end courantes sont triées et résumées pour vous aider à obtenir. à travers l'interview frontale. Gros problèmes. Jetons un coup d'oeil.

[Recommandations associées : Questions d'entretien frontales(2020)]

1 Décrivez comment le z-index et le contexte de superposition sont formés.

Tout d'abord, examinons les raisons de la formation du contexte de superposition en CSS :

1. Marge négative Lorsque la marge est une valeur négative, l'élément sera décalé vers l'extérieur en fonction de. la ligne de référence. La ligne de référence de margin-left/margin-top est l'élément de gauche/l'élément du dessus (s'il n'y a pas d'élément frère, c'est le côté intérieur gauche/haut intérieur de l'élément parent), margin-right La ligne de référence pour margin-bottom est le côté droit de la bordure/bas de la bordure de l'élément lui-même. Généralement, des marges négatives peuvent être utilisées pour la mise en page, mais si elles ne sont pas calculées correctement, les éléments peuvent se chevaucher. L'ordre d'empilement est déterminé par la position des éléments dans le document, les éléments apparaissant plus tard en haut.

2. Positionnement relatif/absolu/fixe de la position Lorsque la valeur de position est définie sur relative/absolue/fixe pour un élément, le décalage de l'élément peut se chevaucher et l'attribut z-index est activé. La valeur de l'indice z peut contrôler l'ordre d'empilement des éléments positionnés dans la direction perpendiculaire à l'écran d'affichage (axe Z). Lorsque les éléments de grande valeur se chevauchent, ils seront au-dessus des éléments de petite valeur.

Attribut z-index z-index ne peut être efficace que sur les éléments dont la valeur de l'attribut position est relative, absolue ou fixe.

Principe de base : La valeur de l'indice z peut contrôler l'ordre d'empilement (ordre de pile) des éléments positionnés dans la direction perpendiculaire à l'écran d'affichage (axe Z). Lorsque les éléments de grande valeur se chevauchent, ils le seront. au-dessus des éléments de petite valeur.

Utiliser la relativité : la valeur du z-index détermine uniquement l'ordre d'empilement des éléments enfants frères et sœurs dans le même élément parent. La valeur z-index de l'élément parent (le cas échéant) définit l'ordre d'empilement des éléments enfants (la version CSS de l'empilement "pin dad").

Si l'élément parent contenant la valeur z-index ne peut pas être trouvé en traçant vers le haut, il peut être considéré comme un élément z-index libre. Il peut positionner l'élément avec les frères frères de l'élément parent ou autre. positions libres. Les éléments sont comparés à leurs valeurs d'index z pour déterminer leur ordre d'empilement. Si les valeurs z-index des éléments frères sont les mêmes, l'ordre d'empilement est déterminé par la position des éléments dans le document, les éléments apparaissant plus tard étant en haut. Donc, si vous constatez qu'un élément avec une valeur d'index z plus grande est masqué par un élément avec une valeur plus petite, veuillez d'abord vérifier la relation entre les nœuds dom entre eux. C'est probablement parce que son nœud parent a une activation et un ensemble d'index z. . La position de la valeur positionne l'élément.

2. Veuillez décrire BFC (Block Formatting Context) et comment il fonctionne.

BFC (Block Formatting Context) se traduit littéralement par « plage de formatage au niveau du bloc ».

3. Répertoriez les différentes techniques pour effacer les flottantes et indiquez leurs scénarios d'utilisation applicables.

Tout d’abord, expliquons pourquoi nous devons nettoyer les flotteurs ? Lorsque tous les éléments d'un conteneur flottent, puisque le flottement séparera les éléments du flux de documents ordinaire, il n'y aura aucun contenu pour le maintenir ouvert pour le conteneur externe. Les paramètres d'arrière-plan ne peuvent pas être affichés et les paramètres de marge ne peuvent pas être affichés. . Méthodes pour effacer les flottants :

1. Ajoutez de nouveaux éléments et appliquez clear: Both ;

例如： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div>
.clear{clear:both; height: 0; line-height: 0; font-size: 0}

Avantages : Simple, moins de code, bonne prise en charge du navigateur, non sujet à des problèmes étranges. Inconvénients Ce sera le cas. ajoutez beaucoup de mises en page non valides, mais il s'agit d'une méthode plus couramment utilisée pour effacer les flottants.

2. Le div parent définit le débordement : auto ou caché

//这里添加了一个class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 }

Principe : largeur ou zoom : 1 doit être défini, et en même temps, la hauteur ne peut pas être définie. Une chose à noter lors de l'utilisation de l'attribut overflow pour effacer les flotteurs est que l'attribut overflow a trois valeurs d'attribut : caché, auto et visible. Nous pouvons utiliser des valeurs masquées et automatiques pour effacer les flotteurs, mais n'oubliez pas de ne pas utiliser de valeurs visibles. Si cette valeur est utilisée, l'effet de suppression des flotteurs ne sera pas obtenu.

Avantages : Simple, moins de code, bonne prise en charge du navigateur Inconvénients : Lors de l'utilisation de auto, lorsque la largeur et la hauteur internes dépassent le div parent, une barre de défilement apparaîtra, et lors de l'utilisation de masqué, elle sera masquée

3. Principe de la méthode after : Utilisez :after et :before pour insérer deux blocs d'éléments à l'intérieur de l'élément pour obtenir l'effet d'effacement des flotteurs. Le principe d'implémentation est similaire à la méthode clear:both, sauf que :clear insère une balise div.clear en HTML, tandis que cette méthode utilise sa pseudo-classe clear:after pour ajouter un effet similaire à div.clear à l'intérieur de l'élément.

Jetons un coup d'œil à son utilisation spécifique :

<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

où clear:both fait référence à la suppression de tous les contenus flottants : '.'; opera/IE8 ne peut pas manquer, dans lequel content() peut avoir une valeur ou être vide. La fonction de visibilité:hidden; est de permettre au navigateur de le restituer mais pas de l'afficher, afin que le flottant puisse être effacé. Donc en général, il est recommandé d’utiliser la méthode pseudo-classe.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Dix dernières questions d'entretien frontal en 2018

Neuf dernières questions d'entretien frontal en 2018

Dernières questions d'entretien frontal de 2018 8

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn