Organiser des questions d'entretien CSS courantes

Modèle de boîte

• Modèle de boîte standard : contenu

• Modèle de boîte étrange : bordure+contenu

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

Éléments en ligne

• Fonctionnalités
  • Le réglage de la largeur et de la hauteur n'est pas valide
  • Le réglage de la marge n'est valide que pour la gauche et la droite, le haut et le bas ne sont pas valides
  • Le réglage du remplissage est valide pour le haut, le bas, la gauche et la droite, ce qui occupera de l'espace
  • Ne s'enroulera pas automatiquement
• Éléments en ligne communs
  • a span b i strong

Élément de bloc en ligne

• Caractéristiques
  • peut définir la largeur et la hauteur
  • Afficher sur la même ligne que tous les éléments en ligne
• Éléments de bloc en ligne communs
  • sélectionner le bouton de saisie img

Éléments au niveau du bloc

• Fonctionnalités
  • Vous pouvez définir la largeur et la hauteur
  • Tous les blocs- les éléments de niveau occuperont une ligne exclusive
  • Si la largeur et la hauteur ne sont pas définies, elles seront héritées par défaut Largeur et hauteur parent
• Éléments communs au niveau du bloc
  • p p ul li h1-h6

implémentation css Centré

• marge : 0 auto;
• position positionnement et transformation : traduire
• mise en page flexible
• alignement du texte et hauteur de ligne, utilisez Centrer la police dans la zone de son élément parent
• alignement vertical : middle; Utilisé pour définir le centrage des éléments en ligne

css hack

• Explication : Pour différents navigateurs, écrivez différents CSS pour la compatibilité
  • condition hack

  <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  • hack d'attribut

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  • Hack de sélecteur

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

px et em

• px sont des unités absolues, la valeur est fixe
• em est héritée L'unité de taille de police de l'élément parent

support

@support est utilisé pour détecter si le navigateur prend en charge un certain attribut CSS. Il peut être compris comme un jugement conditionnel et est généralement utilisé pour le traitement de compatibilité.

media

Media query, basé sur le style css correspondant au cas viewport, fonctionne généralement avec rem pour la compatibilité mobile.

calc

Attribut de calcul CSS, utilisé pour calculer dynamiquement les valeurs de longueur et prend en charge les opérations mathématiques.

Flotteur clair

• Pseudo-élément clear float
  • Principe : Définir clear : les deux dans le pseudo-élément de l'élément parent pour résoudre le problème de l'effondrement en hauteur.

  ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

BFC : est un environnement de mise en page indépendant

• Le contexte de formatage est une zone de rendu indépendante pour les éléments à l'intérieur de BFC Isolé des éléments externes afin que le le positionnement des éléments internes et externes ne s’affectera pas.
• Règles
  • Sous un même BFC, deux cases adjacentes sont disposées verticalement par défaut
  • Sous un même BFC, les marges de deux cases adjacentes au-dessus et en dessous se chevaucheront <.>
  BFC ne chevauchera pas la zone flottante
  • Lors du calcul de la hauteur BFC, les sous-éléments flottants participeront également au calcul, donc si la hauteur BFC n'est pas définie, elle sera également étirée par les sous-éléments flottants.
  • Le calque de texte ne sera pas recouvert par le calque flottant, mais l'entourera

Pour résoudre le problème du chevauchement des bords parent et enfant, la marge de l'élément enfant se déplace avec l'élément parent

+Principe : Utiliser des pseudo-éléments pour ajouter un tableau d'une hauteur de 0 à l'élément parent

Modèle de boîte

• Modèle de boîte standard : contenu
• Modèle de boîte étrange : bordure+contenu

Éléments en ligne

• Fonctionnalités
  • Le paramètre de largeur et de hauteur n'est pas valide
  • Le paramètre de marge n'est valable que pour la gauche et la droite, pas haut et bas
  • Définissez le remplissage pour qu'il soit valide en haut, en bas, à gauche et à droite, et tiendra l'espace
  • Ne s'enroulera pas automatiquement
• Éléments en ligne communs
  • a span b i strong

Élément de bloc en ligne

• Caractéristiques
  • Vous pouvez définir la largeur et la hauteur
  • à afficher au même endroit que tous les éléments en ligne Ligne
• Éléments de bloc en ligne communs
  • bouton de saisie img sélectionner

Éléments au niveau du bloc

• Caractéristiques
  • Vous pouvez définir la largeur et la hauteur
  • Tous les blocs- les éléments de niveau occuperont une ligne exclusive
  • Si la largeur et la hauteur ne sont pas définies, la largeur et la hauteur du parent seront héritées par défaut
• Niveau de bloc commun éléments
  • p p ul li h1-h6

centrage css

• marge : 0 auto;
• positionnement avec transform:translate
• flex layout
• text-align with line-height, utilisé pour les polices dans sa zone d'élément parent Inner center
• vertical-align: middle; Utilisé pour définir le centrage des éléments en ligne

css hack

• Explication : Pour différents navigateurs, écrivez différents CSS pour la compatibilité
  • condition hack

  <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  • hack d'attribut

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  • hack de sélecteur

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

px et em

• px sont des unités absolues, la valeur est fixe
• em est la taille de police héritée de l'élément parent L'unité

support

@ support est utilisé pour détecter si le navigateur prend en charge un certain attribut CSS. Il peut être compris comme un jugement conditionnel et est généralement utilisé pour le traitement de compatibilité.

media

Media query, basé sur le style css correspondant au cas viewport, fonctionne généralement avec rem pour la compatibilité mobile.

calc

Attribut de calcul CSS, utilisé pour calculer dynamiquement les valeurs de longueur et prend en charge les opérations mathématiques.

Flotteur clair

• Pseudo-élément clear float
  • Principe : Définir clear : les deux dans le pseudo-élément de l'élément parent pour résoudre le problème de l'effondrement en hauteur.

  ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

BFC : est un environnement de mise en page indépendant

• Le contexte de formatage est une zone de rendu indépendante pour les éléments à l'intérieur de BFC Isolé des éléments externes afin que le le positionnement des éléments internes et externes ne s’affectera pas.
• Règles
  • Sous un même BFC, deux cases adjacentes sont disposées verticalement par défaut
  • Sous un même BFC, les marges de deux cases adjacentes au-dessus et en dessous se chevaucheront <.>
  BFC ne chevauchera pas la zone flottante
  • Lors du calcul de la hauteur BFC, les sous-éléments flottants participeront également au calcul, donc si la hauteur BFC n'est pas définie, elle sera également étirée par les sous-éléments flottants.
  • Le calque de texte ne sera pas recouvert par le calque flottant, mais l'entourera

Pour résoudre le problème du chevauchement des bords parent et enfant, la marge de l'élément enfant se déplace avec l'élément parent

+ Principe : Utiliser des pseudo-éléments pour ajouter un tableau d'une hauteur de 0 à l'élément parent

Tutoriels associés recommandés :

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!