Questions courantes d'entretien CSS front-end

Alors que l'épidémie continue de s'améliorer, divers endroits ont commencé à reprendre progressivement le travail. Bien sûr, pour nous, les saisons dites d'or, trois, d'argent et quatre sont des changements d'emploi. sur le point de commencer. Ici, j'aimerais partager une partie de mon expérience accumulée dans le domaine du front-end afin de pouvoir revoir le passé et apprendre de nouvelles choses.

Pour le front-end, cela implique un large éventail de connaissances et de contenus, mais cela reste le même, principalement autour du html (5), du css (less, scss, sass, styus, css3) , js (es5, es6) et plusieurs frameworks populaires courants vue, réagir, etc. Sans plus tarder, passons directement au sujet.

Recommandation de sujet : Résumé des questions d'entretien CSS 2020 (dernière)

1. nommez quelques nouvelles fonctionnalités de html5

Réponse : Les nouvelles fonctionnalités ajoutées par html5 sont spécifiquement :

1 De nouvelles balises sémantiques/structurées, telles que pied de page, article, principal, nav, etc.;
2. Nouveaux types et attributs d'entrée, tels que : e-mail, téléphone, numéro, etc.
3. API propriétaire HTML5, emplacement géographique, cache de stockage local, etc.
4. La différence entre la nouvelle balise graphique svg canvas
5. La nouvelle balise multimédia source audio
6. Certaines balises d'éléments abandonnées, telles que : font
7. 8. Déclaration de jeu de caractères DOCTYPE et codage de caractères

2 Utilisation de z-index

Réponse : z-index est utilisé pour définir des étiquettes hiérarchiques. Lorsque vous utilisez le z-index, vous devez définir l'attribut de position de l'étiquette en même temps (tel que relatif, absolu ou fixe). L'index z par défaut de l'étiquette est 0 et vous pouvez définir un négatif. nombre. Plus la valeur est grande, plus elle est élevée en haut

3. Attributs de position et utilisation

Réponse : la position est le positionnement. attribut de css, qui comprend principalement les différentes valeurs d'attribut suivantes, Les détails sont les suivants :

absolu

Générer un élément à positionnement absolu, positionné par rapport au premier élément parent autre que le positionnement statique. La position de l'élément

est spécifiée via les attributs "left", "top", "right" et "bottom".

fixed

génère un élément positionné de manière absolue, positionné par rapport à la fenêtre du navigateur. La position de l'élément

est spécifiée via les attributs "left", "top", "right" et "bottom".

relatif

génère un élément relativement positionné, positionné par rapport à sa position normale.

Donc, "left:20" ajoutera 20 pixels à la position gauche de l'élément.

statique

Valeur par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index).

inherit

spécifie que la valeur de l'attribut position doit être héritée de l'élément parent.

4. Utilisation de float

Réponse : L'attribut définit dans quelle direction l'élément flotte. Historiquement, cette propriété a toujours été appliquée aux images, provoquant l'enroulement du texte autour de l'image, mais en CSS, n'importe quel élément peut flotter. Un élément flottant crée une boîte au niveau du bloc, quel que soit le type d'élément dont il s'agit. Les détails sont les suivants :

L'effet provoqué par float fait que l'élément lui-même devient un élément similaire à inline-block, de sorte que l'élément qui l'enveloppe ignore sa hauteur, c'est-à-dire que l'élément parent n'a pas de hauteur. Par exemple : définir la boîte pour l'élément enfant height:100px; La hauteur de l'élément parent à ce moment est également de 100px. L'effet de float float fait sortir l'élément du flux de documents dans la direction spécifiée jusqu'à ce que son bord extérieur touche la boîte conteneur ou une autre bordure flottante. Le flottement n'affectera que les éléments situés derrière lui. Si l'élément ci-dessus ne flotte pas, il ne flottera pas vers le haut. Si l'élément parent est trop étroit pour accueillir tous les éléments flottants, les éléments flottants qui ne peuvent pas être hébergés seront affichés dans une nouvelle ligne. . Sur la base de l'élément enveloppé dans une ligne, s'il y a un élément flottant avec une hauteur supérieure à l'élément enveloppé dans une ligne, alors lorsque l'élément enveloppé dans une ligne se brise, il sera "coincé" par l'élément le plus grand. 5. Méthodes d'effacement. l'impact du flottant

Réponse : Float causera des dommages au flux de documents Par conséquent, si vous devez éliminer l'impact du float, il existe généralement plusieurs solutions :

Pour les sous-éléments : ajoutez un élément après le sous-élément flottant, et ajoutez un clear : les deux attributs peuvent être affichés normalement. L'inconvénient est qu'un élément vide est ajouté arbitrairement, ce qui n'est pas conforme aux spécifications du code. Pour l'élément parent : ajoutez un élément adjacent. élément vide après l'élément parent, définissez l'attribut clear, mais laissez uniquement les éléments suivants s'afficher normalement et n'étendez pas la hauteur de l'élément parent : définissez la hauteur de l'élément parent, qui peut être affiché. normalement, mais l'évolutivité n'est pas bonne, car la hauteur est généralement agrandie par le contenu à l'intérieur : Définissez l'affichage de l'élément parent : inline-block, il peut être affiché normalement, mais margin:auto de. l'élément parent n'est pas valide et vous constaterez qu'il y aura un écart entre les parties supérieure et inférieure. Pour l'élément parent : définissez overflow : caché sur l'élément parent, il peut être affiché normalement, mais il doit correspondre à la largeur. , sinon il occupera une ligne par défaut. Propriétés d'animation 6.css (telles que l'utilisation de CSS pour freiner un triangle en rotation)

A : Pour créer un triangle, vous pouvez utiliser directement les attributs de bordure. Plus précisément, vous pouvez définir la hauteur et la largeur de la boîte à 0px, puis définir les attributs de couleur des différentes bordures correspondant à la largeur de la base correspondante. du triangle est défini sur une couleur de triangle spécifique. Le correspondant ne doit pas être défini ou défini sur une largeur de 0. Les deux autres hypoténuses sont définies sur transparent

L'animation de rotation impliquera deux propriétés du CSS, à savoir :

1) transition : attribut d'animation, vous pouvez écrire quatre valeurs, qui sont le nom de l'attribut de l'animation correspondante ou tout définir directement, l'heure à laquelle l'animation est terminée (l'unité est s ou ms), le changer la courbe de l'animation, et l'heure à laquelle l'animation commence

2) transform: rotation Les attributs incluent principalement rotate (la rotation radicale comprend également rotate3d, rotateX, rotateY, rotateZ), translation (il y en a quatre dans le de la même façon), l'échelle (il y en a quatre de la même manière)

7. Modèle de boîte formelle et modèle de boîte informelle

Réponse : La Le modèle de boîte calcule principalement la largeur ou la hauteur de l'étiquette de manière incohérente. Le modèle de boîte standard comprend : la marge, la bordure, le remplissage et la largeur du contenu, c'est-à-dire : la largeur réelle de la boîte = les marges gauche et droite du contenu. + les bordures gauche et droite + le remplissage gauche et droit + la largeur réelle du contenu ; et l'attribut box-sizing est introduit dans CSS3, ce qui peut changer la méthode de calcul du modèle de boîte standard, notamment : définir box-sizing : border -box, la largeur réelle de la boîte = les marges gauche et droite du contenu + la largeur réelle du contenu. Bien sûr, vous pouvez directement définir box-sizing : content-box pour restaurer le modèle de boîte standard normal

Disposition élastique 8.flex

Réponse : 1. Définissez l'attribut d'affichage de la boîte sur flex, ou line-flex, ce qui correspond à six attributs CSS, à savoir :

1) flex-direction : Définir la disposition des sous-éléments (ligne, colonne, ligne-reverse, colonne-reverse)

2) flex-warp : Définir si les sous-éléments sont enveloppés (nowarp, warp, warp-reverse)

3) flex-flow : Abréviation de flex-direction et flex-warp, la valeur par défaut est row nowarp

4) justifier-content : définir la disposition horizontale des éléments enfants Mode (flex-start, flex-end, center, span-around, span-between)

5) align-items : définir le mode vertical des éléments enfants (flex-start, flex-end, center, stretch, baseline)

6) align-content : définissez la disposition de plusieurs axes (flex-start, flex-end, center, spand-around, span- between, stretch)

2 . L'élément de sous-élément correspondant possède également ses propres six attributs CSS, qui sont :

1) ordre : définissez le poids de l'arrangement de l'élément avec le plus grand. valeur, plus il y en a derrière

2) flex-grow : définir le taux de grossissement de l'élément

3) flex-shrink : définir le taux de retrait de l'élément

4) flex-basis : Définissez la proportion d'espace occupé par l'axe principal de l'élément d'espace excédentaire

5 ) flex : Les abréviations de flex-grow, flex-shrink et flex-basis sont par défaut 0 1 auto

6) align-self : Définit la disposition verticale des sous-éléments eux-mêmes, la valeur par défaut est l'alignement des éléments de la boîte. La valeur de

 : avertissement : Après avoir défini le flex la mise en page, les éléments flottants, clairs et alignés verticalement des éléments enfants ne sont pas valides

9.disposition de la grille

Réponse : 1. Pour définir la disposition en grille de la boîte, vous devez définir l'affichage sur grille ou grille-ligne, ce qui correspond aux attributs suivants :

1) grille-modèle-colonnes : Définition Largeur de chaque colonne

2) grid-template-rows : Définissez la hauteur de chaque ligne

3) grid-row-gap : Définissez l'écart entre les lignes

4 ) grid-column-gap : Définir l'écart entre les colonnes

5) grid-gap : Définir l'abréviation de l'écart entre les lignes et les colonnes

6) grid-teamplate-areas : Définir une zone composée de plusieurs cellules

7) grid-auto-flow : Définir l'ordre de disposition des conteneurs

8) justifier-items : Définir l'ordre de disposition horizontal du contenu des sous-éléments

9 ) align-items : Définit l'ordre vertical du contenu des sous-éléments

10) place-items : Définit l'abréviation de l'ordre horizontal et vertical du contenu des sous-éléments

11) justifier-content : Définir l'ordre de disposition horizontale du conteneur (grille)

12) align-content : Définir l'ordre de disposition verticale du conteneur (grille)

13) place- content : définit la somme horizontale du conteneur ;

2) grid-column- end : La position où la colonne se termine

3) grid-row-start : La position où la ligne commence

4) grid- row-end : la position où se termine la ligne

5) grille-colonne : position de début et de fin de la colonne

6) grille-ligne : position de début et de fin de la ligne

7) grid-area : définissez la zone dans laquelle l'élément est placé

8) justifié-self : définissez la propre disposition horizontale de l'élément

9) align-self : définissez la propre disposition verticale de l'élément arrangement

10) place-self : définit la disposition horizontale et verticale de l'élément

 : avertissement : lorsqu'il est défini sur la disposition en grille, le float, le bloc en ligne, la cellule de table, la colonne -* les attributs des éléments enfants sont tous invalides

10 Solutions de centrage communes

Réponse : 1. centrer les éléments en ligne : utilisez directement text-align : center

2. Les éléments en ligne sont centrés verticalement : vertical-align : middle et définissez la hauteur de ligne de l'élément parent sur la hauteur de l'élément parent

3. Les éléments à largeur fixe sont centrés horizontalement en utilisant : magin: 0 auto

4. Disposition élastique flexible : définissez le contenu justifié : centrez-le horizontalement, alignez les éléments : centrez verticalement

5. Centrez verticalement via l'attribut de remplissage

6. : display: table-cell, vertical-align: middle

7. Définir le centrage vertical via un pseudo-élément : définissez l'élément parent sur un pseudo-élément et définissez-le sur inline-block, puis définissez vertical-align. : milieu

8. Lorsque la hauteur est déterminée : positionnement absolu + marge pour centrer verticalement

9 Lorsque la hauteur est incertaine : positionnement absolu + transformation, plus précisément : définir les éléments qui doivent le faire. être centré verticalement comme : position : absolue, haut : 50 %, transformation : traduireY(-50%)

10. Centrer verticalement via flex-duration : colonne : affichage : flex, flex-duration : colonne, justifier. -contenu : centre

Méthode de centrage horizontal et vertical :

1 La hauteur de l'élément parent est connue, ainsi que la hauteur et la largeur. de l'élément enfant sont fixes (la hauteur peut ne pas être fixe) : text -align : center, line-height : hauteur parent

2. Positionnement absolu + marge pour réaliser un centrage vertical et horizontal, il faut savoir. la hauteur et la largeur de l'élément enfant

3. Positionnement absolu + transformation pour réaliser un centrage vertical et horizontal Centré, vous n'avez pas besoin de connaître la hauteur et la largeur de l'élément enfant : position : absolu ; 50 % ; gauche : 50 % ; transformer : traduire (-50 %, -50 %)

4. Utiliser l'affichage comme tableau, enfant Les éléments sont display : table-cell ; -align: center. Les éléments enfants sont définis sur vertical-align: center

5 Utilisez le pseudo-élément de l'élément parent pour le centrage vertical (l'élément parent nécessite de connaître la hauteur), définissez la hauteur de. le pseudo-élément à 100 % et définissez vertical-align: middle, display: inline-block ; le sous-élément définit vertical-align: center; display: inline-block (le sous-élément peut être centré horizontalement en utilisant text-align : center ou margin : 0 auto)

6. Les éléments enfants sont définis sur margin : auto ; position : top : 0 ; right : 0 ; 🎜 >

11. Utilisation de pseudo-élémentsRéponse :

Pseudo-classes communes - :hover, :link, :active, : cible, :not(),:focus. Pseudo-éléments courants - ::first-letter, ::first-line, ::before, ::after, ::selection

::before et ::after pour un contenu unique en CSS Ajouter du contenu au tête ou queue logique d'un élément lors du rendu.

Ces ajouts n'apparaîtront pas dans le DOM, ne modifieront pas le contenu du document et ne pourront pas être copiés. Ils sont uniquement ajoutés dans la couche de rendu CSS.

N'utilisez donc pas :before ou :after pour afficher du contenu significatif, essayez de les utiliser pour afficher du contenu décoratif, tel que des icônes

12.css selectorRéponse : le sélecteur de caractères génériques, le sélecteur de balises, le sélecteur de classe, le sélecteur d'identifiant, le sélecteur d'attribut, le sélecteur d'espace est supérieur au sélecteur plus le sélecteur de signe

13 .p Définir le remplissage sur 100 % d'expressionRéponse : Que ce soit en mode standard ou en mode box-sizing, le remplissage fait partie de la largeur totale de l'élément. Donc à ce moment, la performance. de p est la couleur correspondant à p

14. Utilisation de em, rem, px Réponse :

em est une unité relative de longueur. La taille de la police par rapport au texte dans l'objet actuel. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle sera relative à la taille de police par défaut du navigateur. Rem est uniquement relatif à la taille de la police de l'élément racine HTML pour calculer les pixels px (Pixel). Unité de longueur relative. Les pixels px sont relatifs à la résolution de l'écran du moniteur. 15. Utilisation et précautions pour la marge

Réponse : Lorsque la marge est utilisée, la marge entre deux balises adjacentes apparaîtra comme fusionnée, c'est-à-dire en définissant la marge supérieure et la marge inférieure des balises supérieure et inférieure. . Lorsque , il sera automatiquement fusionné et la valeur d'attribut la plus grande sera l'intervalle réel entre les deux

16. Répertoriez plusieurs attributs et utilisations CSS3 courants Réponse : Les plus courantes incluent : border-radius : définir les coins arrondis de l'étiquette ; box-shadow : définir l'ombre, box-sizing : changer le modèle de la boîte, etc.

17. Comparaison de l'utilisation de less et de sassRéponse :

La différence est que l'environnement Less est plus simple que Sass

L'installation de Sass nécessite l'installation de Ruby Environment, Less est basé sur Javascript. Vous devez introduire Less.js pour traiter le code et afficher le CSS dans le navigateur. Vous pouvez également utiliser Less dans le processus de développement, puis le compiler. un fichier CSS et placez-le directement dans le projet.

Less est plus facile à utiliser que Sass

Less n'adapte pas les fonctionnalités originales de CSS, mais ajoute des fonctionnalités de langage procédural au CSS basées sur la syntaxe CSS existante.

Sass a des fonctions plus puissantes que Less

1 Sass a des variables et des portées

2 Sass a le concept de fonctions

3. : conditions, parcours de boucle, héritage, référence

4. Structure des données : tableau, carte

Les mécanismes de traitement Less et Sass sont différents

Le premier est traité via le client, ce dernier Il est traité via le serveur. En comparaison, le premier sera un peu plus lent que le second.

La seule différence entre les variables dans Less et Sass est que Less utilise @ et Sass utilise $. Les similitudes

Less et Sass ont une syntaxe en commun, comme la suivante :

1. Mixins - classe dans la classe

2. Mélange de paramètres - classes qui peuvent transmettre des paramètres, tout comme les fonctions ;

3. Règles d'imbrication - classes imbriquées dans les classes, réduisant ainsi le code en double ; utilisé en CSS ;

5. Fonction Couleur - vous pouvez modifier les couleurs

6. Espace de noms (espace de noms) - regrouper les styles pour qu'ils puissent être appelés ;

7. - modifier le style localement ;

8. Affectation JavaScript - utiliser des expressions JavaScript pour attribuer des valeurs en CSS.

Bien sûr, en ce qui concerne le CSS, vous poserez également des questions sur les langages de prétraitement CSS, tels que less, scss, etc. Vous pouvez vérifier les informations correspondantes par vous-même, et je ne vous expliquerai pas trop beaucoup de choses ici

Recommandations de didacticiels associées :

Tutoriel vidéo CSS

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!