questions d'entretien du jour 01

1. Parlez-moi de votre compréhension du modèle de boîte

Le modèle de boîte signifie que dans une page Web, chaque élément est considéré comme une boîte rectangulaire, qui contient le contenu, le remplissage, la bordure et la marge. Le modèle de boîte définit l'espace occupé et la relation entre les éléments dans la mise en page.

Plus précisément, le modèle de boîte peut être divisé en deux normes différentes : le modèle de boîte standard du W3C et le modèle de boîte standard IE. La différence entre eux réside dans la manière dont la largeur et la hauteur totales de l'élément sont calculées.

1. Modèle de boîte standard du W3C :
   dans le modèle de boîte standard du W3C, la largeur et la hauteur d'un élément incluent uniquement la partie contenu, à l'exclusion du remplissage, des bordures et des marges. Autrement dit, la taille réelle de l'élément est déterminée uniquement par son contenu. La formule est exprimée comme suit :
   largeur = largeur du contenu (largeur du contenu)
   hauteur = hauteur du contenu (hauteur du contenu)

2. Modèle de boîte standard IE :
   dans le modèle de boîte standard IE, la largeur et la hauteur d'un élément incluent le contenu, le remplissage et les bordures, mais n'incluent pas les marges. Autrement dit, la taille réelle de l'élément est déterminée par une combinaison de contenu, de remplissage et de bordures. La formule est exprimée comme suit :
   largeur = largeur du contenu (largeur du contenu) + remplissage gauche et droit (padding-left + padding-right) + largeur des bordures gauche et droite (bordure-gauche-largeur + bordure-droite-largeur) hauteur = contenu hauteur (hauteur du contenu
   )) + rembourrage supérieur et inférieur (padding-top + padding-bottom) + largeur des bordures supérieure et inférieure (border-top-width + border-bottom-width)

En CSS, vous pouvez ajuster la présentation du modèle de boîte en définissant les propriétés padding, border et margin de l'élément. Par exemple, utilisez l'attribut padding pour définir le remplissage, l'attribut border pour définir le style et la largeur de la bordure, et l'attribut margin pour définir la marge extérieure.

Le modèle de boîte est un modèle utilisé pour décrire la disposition et la taille des éléments d'une page Web. Il traite chaque élément de la page Web comme une boîte rectangulaire comprenant quatre parties : zone de contenu, remplissage, bordure et marge.

Plus précisément, le modèle de boîte comprend les éléments suivants :

1. Zone de contenu (Contenu) : Le contenu réel est affiché à l'intérieur de la boîte, comme du texte, des images, etc. Sa taille est déterminée par le contenu de l'élément et peut être définie à l'aide de propriétés CSS telles que widthet .height

2. Rembourrage : Situé entre la zone de contenu et la bordure, il permet de contrôler l'espacement entre le contenu et la bordure. Peut être défini à l' aide de propriétés CSS telles que padding-top, et .padding-rightpadding-bottompadding-left

3. Bordure : s'enroule à l'extérieur du remplissage et est utilisée pour définir les limites de la boîte. Peut être défini à l'aide de propriétés CSS telles que border-width, border-styleet .border-color

4. Marge : située à l'extérieur de la bordure, utilisée pour contrôler l'espacement entre la boîte et les autres éléments. Peut être défini à l' aide de propriétés CSS telles que margin-top, et .margin-rightmargin-bottommargin-left

Ensemble, ces éléments déterminent la position de l'élément sur la page et l'espace qu'il occupe. Lorsque nous définissons la taille ou la disposition d'un élément, nous ajustons en fait les valeurs des propriétés de ces modèles de boîtes.

Par défaut, la taille de l'élément est déterminée par la taille de la zone de contenu. Cependant, nous pouvons box-sizingmodifier la façon dont le modèle de boîte de l'élément est calculé en définissant les propriétés. Les valeurs communes sont :

• content-box(Par défaut) : la largeur et la hauteur incluent uniquement la zone de contenu.
• padding-box: La largeur et la hauteur incluent la zone de contenu et le remplissage.
• border-box: La largeur et la hauteur incluent la zone de contenu, le remplissage et les bordures.

En comprenant le modèle de boîte, nous pouvons mieux contrôler et ajuster la disposition et l’apparence des éléments dans les pages Web pour créer une variété d’effets de page différents.

2.Quels sont les sélecteurs CSS ? priorité? Quelles propriétés peuvent être héritées ?

Les sélecteurs CSS sont utilisés pour sélectionner des éléments dans un document HTML et appliquer des styles à ces éléments. Voici quelques sélecteurs CSS courants :

1. Sélecteur d'éléments : sélectionnez des éléments via les noms de balises des éléments HTML, tels que p, divetc.

2. Sélecteur de classe : sélectionne les éléments en fonction de leur valeur d'attribut de classe, commençant par ., par exemple .my-class.

3. Sélecteur d'ID : sélectionne un élément unique par sa valeur d'attribut id, commençant par #, par exemple #my-id.

4. Sélecteur d'attribut : sélectionne les éléments en fonction de leurs valeurs d'attribut, notamment :

   • [attribute]: Sélectionnez les éléments avec les attributs spécifiés.
   • [attribute=value]: Sélectionnez les éléments avec les attributs et les valeurs d'attribut spécifiés.
   • [attribute~=value]: Sélectionnez les éléments qui ont l'attribut spécifié et la valeur de l'attribut contient la valeur spécifiée.

5. Sélecteur descendant : sélectionne les éléments descendants de l'élément spécifié, séparés par des espaces, par exemple div p.

6. Sélecteur d'élément enfant direct (Child Selector) : sélectionne les éléments enfants directs de l'élément spécifié, >séparés par des symboles, par exemple div > p.

7. Sélecteur de pseudo-classe : sélectionne des éléments dans un état ou une position spécifique, en commençant par deux points :, tels que :hover, :first-childetc.

8. Sélecteur de pseudo-éléments : sélectionne les sous-éléments virtuels d'un élément, en commençant par un double ::deux-points, tel que ::before, ::afteretc.

Les règles de priorité des sélecteurs CSS sont les suivantes (de haut en bas) :

1. !important : les styles avec ce drapeau ont la priorité la plus élevée.
2. Styles en ligne : stylestyles écrits directement sur les éléments HTML via des attributs.
3. Sélecteur d'identifiant : style avec sélecteur d'identifiant.
4. Sélecteur de classe, sélecteur d'attribut, sélecteur de pseudo-classe : styles avec sélecteurs de classe, sélecteurs d'attributs ou sélecteurs de pseudo-classe.
5. Sélecteur d'éléments et sélecteur de pseudo-éléments : styles avec sélecteurs d'éléments ou sélecteurs de pseudo-éléments.
6. Styles hérités : styles hérités des éléments parents.

En général, la plupart des propriétés CSS sont héritables, c'est-à-dire que les éléments enfants hériteront des styles de l'élément parent. Les propriétés héritables courantes incluent, sans s'y limiter :

• font-family
• font-size
• color
• line-height
• text-align
• visibility
• cursor

Cependant, toutes les propriétés ne peuvent pas être héritées, telles que :

• width
• height
• margin
• padding
• border

Il convient de noter que l'héritage dépend de la définition spécifique de chaque propriété et de l'implémentation du navigateur. Dans certains cas, même si une propriété peut être héritée, il est possible de remplacer le style hérité en stylisant explicitement l'élément enfant.

3. Quelles sont les méthodes pour centrer les éléments horizontalement et verticalement ? Que se passe-t-il si l'élément a une largeur et une hauteur variables ?

Il existe de nombreuses façons de centrer des éléments horizontalement et verticalement. Voici quelques méthodes couramment utilisées :

1. Utiliser la disposition CSS Flexbox :
   définissez le conteneur parent sur la disposition Flex et utilisez-le justify-content: center; align-items: center;pour centrer les éléments enfants horizontalement et verticalement.

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

2. Utiliser CSS Grid Layout :
   définissez le conteneur parent sur Grid Layout et utilisez-le place-items: center;pour centrer les éléments enfants dans la grille.

.parent-container {
    
    
  display: grid;
  place-items: center;
}

3. Utiliser un positionnement absolu et des marges négatives :
   définissez l'élément enfant sur un positionnement absolu, top: 50%; left: 50%;positionnez-le au centre du conteneur parent, puis corrigez la largeur et la hauteur de l'élément en lui attribuant des marges négatives.

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. Utilisez l'attribut transform et la fonction de traduction : définissez
   les attributs de l'élément enfant transformsur translate(-50%, -50%)et centrez-le horizontalement et verticalement en conjonction avec un positionnement absolu.

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Si la largeur et la hauteur de l'élément sont incertaines, vous pouvez utiliser un positionnement relatif et un décalage négatif pour le centrer. left: 50%; top: 50%; transform: translate(-50%, -50%);Cette méthode décale l'élément au centre du conteneur parent en utilisant

.parent-container {
    
    
  position: relative;
}

.child-element {
    
    
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

De cette façon, quelles que soient la largeur et la hauteur de l’élément enfant, il peut être centré horizontalement et verticalement dans le conteneur parent.

4. Comment comprendre la redistribution et le redessinage ? Dans quelles circonstances sera-t-il déclenché ?

Redistribuer et repeindre sont deux concepts clés lorsque le navigateur affiche la page.

La redistribution signifie que lorsque la structure DOM change ou que le style d'un élément change, le navigateur recalcule les propriétés géométriques de l'élément (telles que la position, la taille, etc.) et remodèle la page. L'opération de redistribution implique le processus de calcul de la mise en page entière, de sorte que la surcharge de performances est importante.

Le redessin signifie qu'une fois la redistribution terminée, le navigateur redessine la partie affectée ou toute la zone visible de la page en fonction des nouvelles informations de mise en page. Le redessinage n'implique pas de calculs de mise en page, mais simplement la mise à jour des couleurs des pixels, de sorte que la surcharge de performances est relativement faible.

Le navigateur déclenche la redistribution et le repaint dans les conditions suivantes :

Situations qui déclenchent la refusion :

• Ajoutez, supprimez et modifiez des nœuds DOM.
• Modifiez les propriétés de disposition des nœuds DOM (telles que la position, la taille, l'état caché, etc.).
• La page est rendue pour la première fois.
• La taille de la fenêtre du navigateur change.
• Obtenez des propriétés ou appelez certaines méthodes (telles que offsetWidth, offsetHeight, getComputedStyle, etc.).

Situations qui déclenchent un redessin :

• Modifiez les propriétés de style de l'élément, telles que la couleur, la couleur d'arrière-plan, la police, etc., mais ne modifiez pas ses propriétés de mise en page.
• Changez les noms de classe ou ajoutez ou supprimez des feuilles de style.

Étant donné que la redistribution est plus coûteuse que le redessinage, une redistribution et un redessinage fréquents entraîneront une dégradation des performances de la page. Par conséquent, pour minimiser le déclenchement de la redistribution et du redessinage lors de l'écriture du code, vous pouvez prendre les mesures suivantes :

• Utilisez la propriété transform de CSS pour effectuer des transformations telles que le déplacement et la mise à l'échelle au lieu de modifier les propriétés de mise en page telles que haut, gauche, largeur et hauteur.
• Lors de la modification des styles DOM par lots, utilisez la méthode d'ajout/suppression de noms de classe pour éviter de modifier directement l'attribut de style.
• Utilisez DocumentFragment pour exécuter par lots plusieurs opérations DOM.
• Pour les propriétés de mise en page qui nécessitent un accès fréquent, évitez les lectures multiples en mettant les résultats en cache.

Grâce à une optimisation raisonnable, le nombre de redistributions et de redessins du navigateur peut être réduit, et les performances des pages et l'expérience utilisateur peuvent être améliorées.

5. Qu’est-ce que le design réactif ? Quels sont les principes de base du responsive design ? Comment faire?

Le Responsive Design est une méthode de conception permettant de créer des pages Web et des applications qui s'adaptent à différentes tailles d'écran et appareils. Le principe de base est de permettre à la page d'ajuster dynamiquement la mise en page, la taille de la police, la taille de l'image, etc. en fonction de l'appareil utilisé par l'utilisateur pour offrir la meilleure expérience utilisateur.

Les principes de base du responsive design sont les suivants :

1. Disposition de grille flexible : utilisez des unités relatives (telles que des pourcentages) pour définir la largeur des éléments, ce qui lui permet d'ajuster automatiquement la disposition en fonction de la taille de l'écran.

2. Requêtes multimédias : grâce aux requêtes multimédias en CSS, des règles de style spécifiques sont fournies pour différents appareils en fonction de différentes largeurs d'écran, hauteurs, types d'appareils et d'autres informations.

3. Images et médias flexibles : utilisez les propriétés CSS (telles que max-width) et les balises HTML (telles que <picture>ou <video>) pour garantir que les images et le contenu multimédia s'adaptent bien aux différents appareils.

4. Texte et polices réactifs : utilisez des unités relatives (par exemple em) et des requêtes multimédias pour ajuster la taille des polices en fonction de la taille de l'écran afin d'en améliorer la lisibilité et la convivialité.

5. Amélioration progressive : commencez par les fonctionnalités et la mise en page de base, puis ajoutez progressivement des fonctionnalités et des optimisations plus avancées pour garantir que le contenu principal est accessible sur différents appareils.

Pour mettre en œuvre une conception réactive, procédez comme suit :

1. Fixez-vous des objectifs : déterminez le public cible, la gamme d'appareils et les fonctionnalités requises de votre conception réactive.

2. Planifiez la mise en page : utilisez un système de grille flexible pour définir la mise en page et le système de grille afin qu'ils puissent s'adapter aux différentes tailles d'écran.

3. Utiliser les requêtes multimédias : en fonction des différentes tailles d'écran et caractéristiques de l'appareil, écrivez des règles de style CSS pour différentes situations et appliquez-les à la page via des requêtes multimédias.

4. Travailler avec des images et des médias : sélectionnez et travaillez avec des images, en utilisant des requêtes multimédias et des propriétés CSS appropriées pour garantir qu'elles s'affichent correctement sur différents appareils.

5. Gestion du texte et des polices : choisissez les polices et les tailles de police appropriées, et utilisez des unités relatives et des requêtes multimédias pour ajuster le texte afin d'en améliorer la lisibilité sur différents appareils.

6. Tests et optimisation : testez sur différents appareils et navigateurs, puis optimisez et améliorez la conception réactive en fonction des commentaires des utilisateurs et de l'analyse des données.

La conception réactive peut offrir une bonne expérience utilisateur et s’adapter facilement à différents appareils et tailles d’écran, améliorant ainsi la satisfaction des utilisateurs et l’accessibilité du site Web ou de l’application.

6. Si vous souhaitez optimiser, quels sont les moyens d’améliorer les performances du CSS ?

Pour améliorer les performances CSS, vous pouvez procéder comme suit :

1. Réduisez et compressez le code CSS : supprimez les espaces, les commentaires et le code inutiles, et utilisez des outils de compression pour réduire la taille des fichiers et le temps de transfert réseau.

2. Fusionner les fichiers CSS : fusionnez plusieurs fichiers CSS en un seul fichier pour réduire le nombre de requêtes HTTP et accélérer le chargement des pages.

3. Utilisez des préprocesseurs CSS : tels que Sass ou Less, et utilisez ses variables, imbrication, mélange et autres fonctions pour améliorer l'efficacité de l'écriture CSS et la maintenabilité du code.

4. Évitez d'utiliser trop de sélecteurs : trop de sélecteurs imbriqués et hiérarchiques augmenteront la complexité de la correspondance des sélecteurs. Il est recommandé de simplifier la structure du sélecteur autant que possible pour éviter une limitation excessive.

5. Optimiser les performances des sélecteurs : il est préférable d'utiliser des sélecteurs d'ID et des sélecteurs de classe plutôt que des sélecteurs de balises et des sélecteurs de caractères génériques, car ils correspondent plus rapidement.

6. Utiliser la technologie de mise en cache : en définissant des politiques de mise en cache appropriées, le navigateur peut mettre en cache les fichiers CSS, réduire les chargements répétés et améliorer la vitesse de réponse des pages.

7. Évitez d'utiliser des propriétés CSS coûteuses : certaines propriétés telles que box-shadow, border-radiusetc. peuvent affecter les performances de rendu, utilisez-les donc le moins possible ou évitez les modifications fréquentes.

8. Utiliser des animations et des transitions CSS : l'utilisation d'animations et de transitions CSS au lieu des effets d'animation implémentés en JavaScript peut mieux tirer parti de l'accélération matérielle et améliorer les performances et la fluidité.

9. Utilisez des sprites CSS : combinez plusieurs petites icônes ou images d'arrière-plan en une seule grande image et utilisez background-positiondes attributs précis pour afficher les parties requises, réduisant ainsi le nombre de requêtes HTTP.

10. Évitez d'utiliser @import : <link>Il est préférable d'utiliser des balises pour introduire des feuilles de style externes plutôt que d'utiliser des règles @import, car ces dernières entraîneront le chargement de la page.

En prenant ces mesures, vous pouvez optimiser efficacement les performances CSS et améliorer la vitesse de chargement des pages Web et l'expérience utilisateur.