Entretien avec une grande usine, ces questions CSS doivent être maîtrisées

Dans le front-end moderne, les entretiens ont des exigences moindres pour l'investigation CSS, ce qui peut difficilement être comparé à JavaScript, ou même à un certain sujet de subdivision de JavaScript.

Cet article répertorie plusieurs questions d'entretien CSS qui peuvent être utilisées pour les entretiens CSS dans la plupart des entreprises.

Pour plus de questions d'entretien CSS, vous pouvez consulter les questions d'entretien CSS

modèle de boîte

• Sujet : Une brève description du modèle de boîte CSS

Le modèle de boîte de CSS comprend principalement les deux types suivants, qui peuvent être configurés via la propriété box-sizing :

• content-box: propriété par défaut. largeur ne contient que du contenu
• border-box:width contient (contenu, remplissage, bordure)

Spécificité CSS (poids)

• Sujet : Décrire brièvement la spécificité CSS

css specificityC'est-à-dire le poids du sélecteur en css, les trois types de sélecteurs suivants descendent tour à tour

1. idsélecteurs tels que#app
2. class, attributeet des pseudo-classessélecteurs , tels que .header, [type="radio"]et:hover
3. typeSélecteurs d'étiquettes et sélecteurs de pseudo-éléments tels que h1, pet::before

Parmi eux, les sélecteurs génériques *, les sélecteurs combinés + ~ >et les sélecteurs de pseudo-classe inversés n'ont aucun effet :not()sur la priorité

Les styles en ligne supplémentaires <div class="foo" style="color: red;"></div>et !important(le plus élevé) ont un poids plus élevé

:notL'impact prioritaire de - codepen peut voir qu'il n'a aucun effet sur la priorité :notdu sélecteur

Spécificité CSS - codepen peut voir qu'il y a plus d'une douzaine de sélecteurs de classe et qu'aucun des sélecteurs d'id n'a un poids élevé

Questions supplémentaires :

1. 100 个 class 选择器和 id 选择器那个比较高
2. 属性选择器和类选择器哪个权重较高
3. 通配符选择器和元素选择器哪个权重教高

'+' 与 '~' 选择器有什么不同

• 【Q315】'+' 与 '~' 选择器有什么不同

• + 选择器匹配紧邻的兄弟元素

• ~ 选择器匹配随后的所有兄弟元素

z-index 与层叠上下文

• 题目：如何更好地给元素设置 z-index
• 题目：z-index: 999 元素一定会置于 z-index: 0 元素之上吗

z-index 高数值一定在低数值前边吗，div 层级如下所示

• A -> 3
  • AA -> 1000
• B -> 4
  • BB -> 10

代码见 zindex - codepen

不一定，更复杂的示例见 层叠上下文 - MDN

水平垂直居中

• 题目: 如何实现一个元素的水平垂直居中
• 代码: absolute/translate

宽高不定的块状元素水平垂直居中，可见以下示例

• absolute/translate

同时提供几种不同的思路：

• flex:
  • justify-content: center
  • align-content: center
• grid
  • place-items: center
• absolute/translate
  • position: absolute
  • left/top: 50%
  • transform: translate(50%)
• ##absolute/inset##

左侧固定、右侧自适应

• 题目: css 如何实现左侧固定300px，右侧自适应的布局
• 代码: 代码

提供 flex 与 grid 布局的两种思路

• flex:
  • 左侧: flex-basis: 200px
  • 右侧: flex-grow: 1; flex-shrink: 0;
• grid
  • 父容器: grid-template-columns: 200px 1fr;

.container
  .left
  .main
复制代码

.container {
  display: grid;
  grid-template-columns: 300px 1fr;
}
复制代码

三栏均分布局

• 题目: 如何实现三列均分布局
• Code : comment implémenter une mise en page à trois colonnes

flexFournir également gridles deux schémas de et

• fléchir:
  • Première option :flex: 1;
  • Option II :flex-basis: calc(100% / 3)
• la grille:
  • conteneur parent :grid-template-columns: 1fr 1fr 1fr

Autre question : comment réaliser la mise en page à seize colonnes également divisée ?

Comment dessiner un carré/rectangle avec une longueur et une largeur fixes

• Question : Comment dessiner un carré/rectangle avec une longueur et une largeur fixes

L'ancienne solution consistait à utiliser padding. paddingSi un élément est défini en pourcentage, cela signifie que la largeur de l'élément parent est utilisée comme référence.Selon ce principe, le rapport d'aspect peut être défini. Mais en fait, le sens est limité, après tout, vous occupez le rembourrage et il n'y a pas de place pour le contenu.

Une solution moderne consiste à utiliser la propriété CSS ratio d'aspect : aspect-ratio.

Comment CSS évite les conflits de style

• Sujet : Comment éviter les conflits de style de nommage lors de l'écriture de CSS

1. Formule BEM :.home-page .home-page-btn

.home-page {
  .home-page-btn {}
}
复制代码

BEM a un défaut, c'est-à-dire qu'il est trop long et qu'il peut être simplifié de manière appropriée, en enveloppant uniquement le nom de classe racine du composant de page, mais cela peut augmenter le risque de conflit de style

.home-page {
  .btn {}
}
复制代码

2. Champ d'application CSS

scoped cssUn attribut ou un nom de classe unique sera généré pour tous les éléments sous le composant actuel (portée), et toutes les règles CSS porteront des attributs uniques pour assurer la protection de la dénomination de la portée

// 手动写
.btn {}

// 编译后
.btn .jsx-1287234 {}

复制代码

3.Module CSS

• dépôt de modules css
• démo des modules css

module cssLe nom de la classe sera haché

Variables CSS

• Sujet : Avez-vous déjà utilisé une variable CSS et quels problèmes résout-elle ?

:root{
  --bgcolor: #aaa;
  --color: #000;
}
复制代码

Mode sombre de la configuration CSS

• Sujet : Comment utiliser CSS pour implémenter le mode sombre du site Web (Dark Mode)

Dans sa forme la plus simple, cela est réalisé via des requêtes multimédias @media (prefers-color-scheme: dark)et des variables CSS.

@media (prefers-color-scheme: dark) {
    :root{
    }
}
复制代码