10 questions d'entretien à haute fréquence sur les CSS dans les entretiens Web front-end

1. Qu'est-ce que le mécanisme BFC

BFC (Block Formatting Context), Niveau bloc Le contexte de formatage est une zone de rendu indépendante qui isole les éléments à l'intérieur du BFC des éléments externes afin que le positionnement des éléments internes et externes ne s'affecte pas les uns les autres.

• Condition de déclenchement (l'un des éléments suivants)
  • La valeur de float n'est pas nulle
  • La valeur de débordement n'est pas visible
  • La valeur d'affichage est La valeur de l'une des cellules de table, de la légende de table et du bloc en ligne
  • la position n'est pas statique ou relative

Sous IE, la mise en page peut être déclenchée par zoom:1

• La différence entre la mise en page BFC et la mise en page ordinaire du flux de documents : Règles de disposition BFC :
  1. Les éléments flottants verront leur hauteur calculée par leur parent (l'élément parent déclenche BFC)
  2. Les éléments non flottants ne couvriront pas la position des éléments flottants (éléments non flottants trigger BFC) )
  3. la marge ne sera pas transmise au parent (le parent déclenche BFC)
  4. Les marges supérieure et inférieure de deux éléments adjacents appartenant au même BFC se chevaucheront
  5. Mise en page normale du flux de documents : les éléments flottants n'auront pas leur hauteur calculée par leur parent
  6. Les éléments non flottants couvriront la position des éléments flottants
  7. la marge sera transmise à l'élément parent
  8. Deux adjacents Les marges au-dessus et en dessous de l'élément se chevaucheront
• Applications en cours de développement
  • Empêcher le chevauchement des marges
  • Peut contenir des éléments flottants - flotteurs internes clairs (flottants clairs. Le principe est que les deux p sont situés dans la même zone BFC)
  • La disposition adaptative à deux colonnes

  • peut empêcher les éléments d'être recouverts par le flottement éléments

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

2. Les nouveaux sélecteurs et attributs en CSS3

sont simplement répertoriés ici Pour une utilisation spécifique, veuillez consulter mon article sur les nouveaux sélecteurs et attributs en CSS3

<.>

Sélecteur d'attributs

• 属性选择器	含义描述
  E[att^="val"]	属性att的值以"val"开头的元素
  E[att$="val"]	属性att的值以"val"结尾的元素
  E[att*="val"]	属性att的值包含"val"字符串的元素

  Sélecteur d'attribut

  
  Description de la signification

  
  >E[att^="val"]

  
  Éléments d'attribut dont la valeur att commence par "val"

  E[att$="val"]

  
  Éléments dont la valeur d'attribut att se termine par "val"

  
  E[att*="val"]

  La valeur de l'attribut att contient l'élément de chaîne "val"

  • Sélecteur de pseudo-classe de structure

  选择器	含义描述
  E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
  E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
  E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
  E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
  E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
  E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
  E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
  E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
  E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
  E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
  E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

  • Nouvel attribut CSS3

  Attribut	Signification Description	Compatible
  transition	Définir l'effet de transition
  transformer	Effets de transformation (déplacement, mise à l'échelle, rotation, étirement ou étirement)
  animation	Effet d'animation
  boîte-ombre	Effet d'ombre	FF3.5, Safari 4, Chrome 3
  texte-ombre	texte-ombre	FF 3.5, Opera 10, Safari 4, Chrome 3
  bordure -couleurs	Définir plusieurs couleurs pour la bordure	FF3+
  boder-image	Bordure d'image	FF 3.5, Safari 4, Chrome 3
  débordement de texte	troncature de texte	IE6+, Safari4, Chrome3, Opera10
  retour à la ligne	Retour à la ligne	IE6+, FF 3.5, Safari 4, Chrome 3
  bordure-rayon	coin rond Bordure	FF 3+, Safari 4, Chrome 3
  opacité	Opacité	tous
  dimensionnement de la boîte	Mode de composition du modèle de boîte de contrôle	FF3+, Opera 10, Safari 4, Chrome 3
  contour	frontière extérieure	FF3+, safari 4, chrome 3, opéra 10
  fond -size	Ne précise pas la taille de l'image d'arrière-plan	safari 4, chrome 3, opéra 10
  origine-arrière-plan	Spécifiez où commencer à afficher l'image d'arrière-plan	safari 4, chrome 3, FF 3+
  clip-de-fond	Spécifiez où commencer à recadrer l'image d'arrière-plan	safari 4, chrome 3
  rgba	Définissez la valeur de couleur en fonction des trois canaux de couleur r, g, b , via un pour définir la transparence	safari 4, chrome 3, FF3, opéra 10

  3. Disposition centrée

  • Centrage horizontal
    1. Éléments en ligne : text-align:center
    2. Éléments au niveau du bloc : margin:0 auto
    3. Positionnement et mouvement absolus : absolute + transform
    4. Positionnement absolu et marges négatives : absolute + margin
    5. Disposition flexible : flex + justify-content:center
  • Centré verticalement
    1. L'élément enfant est une seule ligne de texte : line-height:height
    2. absolute + transform
    3. flex + align-items:center
    4. tableau : display:table-cell; vertical-align: middle
    5. Utiliser la position et la marge supérieure et négative
  • Centrage horizontal et vertical

  1. Largeur et hauteur de l'élément connu : positionnement absolu+marge:auto:

     p{
        width: 200px;
        height: 200px;
        background: green;
  
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

  2. Largeur et hauteur de l'élément connu : positionnement absolu+marge négative

     p{
        width: 200px;
        height: 200px;
        background: green;
  
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

  . 3. transformation absolue+

     p{
       width: 200px;
       height: 200px;
       background: green;
  
       position:absolute;
       left:50%;    /* 定位父级的50% */
       top:50%;
       transform: translate(-50%,-50%); /*自己的50% */
     }

  4.flex + justify-content + align-items

  .box{
     height:600px;  
  
     display:flex;
     justify-content:center;  //子元素水平居中
     align-items:center;      //子元素垂直居中
       /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
      }
    .box>p{
      background: green;
      width: 200px;
      height: 200px;
    }

  4 Quelles sont les méthodes pour effacer les flotteurs et quels sont leurs avantages et inconvénients

  • Utilisez l'attribut clear Éléments vides Utilisez un élément vide tel que <p class="clear"></p> après un élément flottant et attribuez l'attribut .clear{clear:both;} en CSS pour nettoyer le flottant. Vous pouvez également utiliser <br class="clear" /> ou <hr class="clear" /> pour le nettoyage.

  Avantages : simple, écriture d'une petite quantité de code, bonne compatibilité Inconvénients : l'ajout d'éléments html non sémantiques n'est pas propice à la sémantique du code et le coût de maintenance ultérieur est élevé

  • Utilisez l'attribut overflow de CSS pour ajouter overflow:hidden; ou overflow:auto; au conteneur de l'élément flottant pour effacer le float De plus, hasLayout doit être déclenché dans IE6, par exemple en définissant le conteneur. largeur et hauteur ou réglage zoom:1 pour l'élément parent. Après avoir ajouté l'attribut de débordement, l'élément flottant retourne à la couche conteneur, augmentant la hauteur du conteneur, obtenant ainsi l'effet de nettoyer les éléments flottants.

  Avantages : simple, moins de code, bon support du navigateur Inconvénients : ne peut pas être utilisé avec la position, car la taille excédentaire sera masquée overflow:hidden

  • En utilisant le pseudo-élément :after de CSS combiné avec le pseudo-élément :after (notez qu'il ne s'agit pas d'une pseudo-classe, mais d'un pseudo-élément, représentant l'élément le plus proche après un élément) et IEhack, cela peut être parfaitement compatible avec tous les principaux navigateurs grand public actuels, ici Le IEhack fait référence au déclenchement de hasLayout. Ajoutez une classe clearfix au conteneur de l'élément flottant, puis ajoutez un pseudo-élément :after à cette classe pour ajouter un élément de bloc invisible (élément Block) à la fin de l'élément pour nettoyer le flotteur. Un espace invisible "020" ou un point "." est ajouté à la fin de l'élément interne du conteneur via des pseudo-éléments CSS, et l'attribut clear est attribué pour effacer le flottant. Il convient de noter que pour les navigateurs IE6 et IE7, un zoom:1 doit être ajouté à la classe clearfix pour déclencher haslayout.

  Avantages : Bon support du navigateur, peu sujet à des problèmes étranges (actuellement : utilisé par les grands sites Web, tels que : Tencent, NetEase, Sina, etc.) Inconvénients : Beaucoup de code, exigeant Ce n'est qu'en combinant les deux lignes de code que les navigateurs grand public peuvent prendre en charge

  • définir la hauteur de l'élément parent

  Simple, moins de code, facile pour maîtriser Inconvénients : Convient uniquement aux mises en page à hauteur fixe

  5. Quel est le principe de créer un triangle avec du CSS pur

  Avant d'écrire des triangles, ils ont été écrits directement. J'étais coincé dans le code et je n'ai pas exploré les raisons. Ce n'est que lorsque j'ai eu un entretien que l'intervieweur m'a demandé de parler du principe de création d'un triangle avec CSS, alors je... je J'ai rapidement parcouru les informations à mon retour. Ensuite, j'ai expliqué ce que j'avais compris à l'époque. Le processus est répertorié :

  1 Rédigez une demande de frontière que nous connaissons le mieux

  .box{
  	width:100px;
  	height:100px;
  	border: 3px solid;
  	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
  }

  . L'effet est le suivant :

  2. Ensuite, nous augmentons la valeur de la bordure

  .box{
  	width:100px;
  	height:100px;
  	border: 50px solid;
  	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
  }

  <. 🎜>

  很容易发现, border渲染并不是正方形, 而是梯形的.

  3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!

  .box{
  	width:0px;
  	height:0px;
  	border: 50px solid;
  	border-color:#1b93fb #1bfb24 #efad48 #ef4848;
  }

  四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;

  4. 设置透明, 隐藏其中三个三角形

   .box{
  	width:0px;
  	height:0px;
  	border: 50px solid;
  	border-color:transparent transparent transparent #ef4848;
  }

  三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的

  .box{
  	width:0px;
  	height:0px;
  	border: 50px solid transparent;
  	border-left:50px solid #ef4848;
  }

  这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用

  6. 实现三栏布局有哪些方法, 分别描述一下

  三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：

  下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:

  • Flex 布局

  <style>
  .container{
    display:flex;
    justify-content: center;
    height: 200px;
    background: #eee;
  }
  .left {
     width: 200px;
     background-color: red;
     height: 100%;
   }
  .main {
      background-color: yellow;
      flex: 1;
  }
  .right {
      width: 200px;
      background-color: green;
  }
  </style>
  <p class="container">
    <p class="left">1</p>
    <p class="main">2</p>
    <p class="right">3</p>
  </p>

  简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。

  • 绝对定位布局

  <style>
  .container {
    position: relative;
    background:#eee;
    height:200px;
  	}
  .main {
    height: 200px;
    margin: 0 120px;
    background-color: yellow;
  	}
  .left {
    position: absolute;
    width: 100px;
    height: 200px;
    left: 0;
    top: 0;
    background-color: red;
  	}
  .right {
    position: absolute;
    width: 100px;
    height: 200px;
    background-color: green;
    right: 0;
    top: 0;
  }
  </style>
  
  <p class="container">
    <p class="left">1</p>
    <p class="main">2</p>
    <p class="right">3</p>
  </p>

  这种方案也简单实用, 并且可以将 <p class="main"></p>元素放到第一位,使得主要内容优先加载!

  • 双飞翼布局

  <style>
  .content {
    float: left;
    width: 100%;
  }
  .main {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background-color: yellow;
  }
  .left {
    float: left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background-color: red;
  }
  .right {
    width: 200px;
    height: 200px;
    float: right;
    margin-left: -200px;
    background-color: green;
  }	
  
  </style>
  <p class="content">
    <p class="main"></p>
  </p>
  <p class="left"></p>
  <p class="right"></p>

  • 圣杯布局

  <style>
  .container {
    margin-left: 120px;
    margin-right: 220px;
  }
  .main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: yellow;
  }
  .left {
    float: left;
    width: 100px;
    height: 300px;
    margin-left: -100%;
    position: relative;
    left: -120px;
    background-color: blue;
  }
  .right {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -200px;
    position: relative;
    right: -220px;
    background-color: green;
  }
  </style>
  <p class="container">
    <p class="main"></p>
    <p class="left"></p>
    <p class="right"></p>
  </p>

  圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。

  7. css3实现0.5px的细线

  <style>
  .line {
      position: relative;
  }
  .line:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      background-color: #000000;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
  }
  </style>
  
  <p class="line"></p>

  8. link 与 @import 的区别

1. 从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

1. 加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

1. 兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

1. DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他

9. 开发中为什么要初始化css样式

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

10. Quels sont les moyens d'optimiser CSS et d'améliorer les performances ?

• Essayez d'écrire le style dans un fichier CSS séparé, référencez-le dans l'élément head et écrivez. le code dans des fichiers CSS séparés présente plusieurs avantages :
  1. Séparation du contenu et des styles, facile à gérer et à entretenir
  2. Réduire la taille de la page
  3. Les fichiers CSS peuvent être mis en cache et réutilisés , réduisant les coûts de maintenance
• Ne pas utiliser @import
• Évitez d'utiliser des sélecteurs complexes. Moins il y a de niveaux, mieux c'est. Il est recommandé que l'imbrication des sélecteurs ne dépasse pas. trois niveaux, tels que :
• Rationnalisez les fichiers de style de la page et supprimez les styles inutilisés
• Utilisez l'héritage CSS pour réduire la quantité de code
• Évitez ! important, vous pouvez choisir d'autres sélecteurs

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!