Sept questions d'entretien CSS importantes

Table des matières

• 1. Le modèle de boîte en CSS3
• 2 La différence entre display:none et visible:hidden
• 3 Parlons des sprites CSS
• 4. Quelles sont les valeurs d'attribut de position ?
• 5. Quelles sont les différences entre PNG, GIF, JPG et WEBP et comment choisir ?
• 6. Que sont les sélecteurs CSS ? Priorité?
• 7. Concernant les flotteurs
• (1) Quand dois-je nettoyer les flotteurs ?

• (2) Comment effacer les flotteurs ?

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

1. Modèle de boîte en CSS3

Il existe deux types de modèles de boîte en CSS3 : le modèle de boîte standard et le modèle de boîte IE

• La différence entre le modèle de boîte standard et le modèle de boîte IE est la suivante : la largeur et la hauteur du modèle de boîte standard font référence à la largeur et à la hauteur du contenu, tandis que la largeur et la hauteur du modèle de boîte IE fait référence au contenu, à la somme du remplissage et des bordures.

• En CSS3, vous pouvez utiliser box-sizeing:border-box pour convertir un modèle de boîte normal en modèle de boîte IE. Parfois, nous avons défini la largeur et la hauteur d'une boîte, mais si nous voulons changer border, pour que la taille de la boîte change, nous pouvons la convertir en modèle de boîte IE sans avoir à calculer la taille de la boîte contenu à chaque fois.

• dans le modèle de boîte

  • box-sizeing:content-box représente le modèle de boîte standard (par défaut)
  • box-sizeing:border-box représente le modèle de boîte IE (C'est-à-dire le modèle de boîte bizarre)

De plus, il existe : Modèle de boîte élastique Flex

2. La différence entre display:none et visible:hidden

Les deux attributs rendent l'élément masqué

Différence :

( 1) Dans l'arbre de rendu,

• display:none fera disparaître complètement l'élément de l'arbre de rendu et n'occupera aucun espace lors du rendu
• visibility:hidden L'élément sera ne disparaîtra pas de l'arbre de rendu. L'élément rendu occupera toujours l'espace correspondant, mais le contenu ne sera pas visible

(2) Hériter

• display:none Oui. ou non Si les attributs sont hérités, ses nœuds descendants disparaîtront de l'arbre de rendu avec le nœud parent, et ils ne pourront pas être affichés en modifiant les attributs des nœuds descendants.
• visibility:hidden est un attribut hérité. Les nœuds descendants disparaissent car ils héritent de hidden En définissant visibility:visible, les nœuds descendants peuvent être affichés.

(3) La modification display d'un élément dans le flux de documents régulier entraînera généralement la réorganisation du document, mais la modification de l'attribut visibility entraînera uniquement le redessinage de l'élément

(4) Si un lecteur d'écran est utilisé, le contenu défini sur display:none ne sera pas lu, mais le contenu défini sur visibility:hidden sera lu. visibility:hidden

3. Parlons des sprites CSS

Concept :

Un sprite est un épissage de plusieurs petites images dans une image, quand en l'utilisant, ajustez le motif d'arrière-plan qui doit être affiché en fonction de la taille de l'élément background-position.

Avantages :

• Réduire le nombre de requêtes HTTP, ce qui améliore dans une certaine mesure la vitesse de chargement de la page
• Réduit la taille des images car chaque image a des informations d'en-tête. Si vous rassemblez plusieurs images, elles partageront les mêmes informations d'en-tête, ce qui réduit le nombre d'octets de l'image
• Il est pratique de changer le style. Il vous suffit d'ajouter une ou plusieurs images. En modifiant la couleur ou le style de l'image, le style de l'ensemble de la page Web peut être modifié.
• Réduit la difficulté de nommer les images, il suffit de nommer une ou plusieurs images

Inconvénients :

• La maintenance est problématique. Si l'arrière-plan de la page change légèrement, l'intégralité de l'image fusionnée doit être modifiée.
• La fusion est problématique. Plusieurs images doivent être fusionnées en une seule image de manière ordonnée et raisonnable. Réservez également une certaine quantité d'espace pour éviter les arrière-plans inutiles
• Dans les pages adaptatives sous écrans larges ou haute résolution, si l'image n'est pas assez large, l'arrière-plan peut être cassé

4. Quelles sont les valeurs d'attribut de position ?

属性值	概述
absolute	生成绝对定位的元素，相对于static定位以外的一个父元素进行定位
relative	生成相对定位的元素，相对于其原来的位置进行定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
static	默认值，没有定位，元素出现在正常的文档流中
inherit	规定从父元素继承position属性的值

5. Quelles sont les différences entre PNG, GIF, JPG et WEBP et comment choisir ?

(1) GIF

• Les images GIF stockent uniquement des index 8 bits et prennent en charge jusqu'à 256 couleurs
• utilise une compression sans perte et a une taille plus petite
Prend en charge les animations transparentes et simples

Applicable à  : logo couleur simple, icône, filaire, animation simple

(2) JPG

En utilisant la compression avec perte, vous pouvez contrôler la qualité de la compression
• En utilisant la couleur directe, des couleurs riches
• Ne prend pas en charge la transparence

Applicable dans  : Images colorées, images dégradées

(3) PNG

png-8 est un format bitmap qui utilise une compression sans perte et est basé sur une indexation 8 bits Les couleurs. GIF a un meilleur support pour la transparence et une taille plus petite avec la même qualité, mais il ne prend pas en charge l'animation. Convient aux icônes, arrière-plans, boutons.
• png-24 utilise une compression sans perte et est un format bitmap basé sur la couleur directe. La taille est plus grande que celles ci-dessus, mais la qualité de l'image est élevée. Il convient à l'enregistrement de fichiers sources ou de formats d'image requis. édition secondaire.

(4) WEBP

Développé par Google, de plus petite taille
• Prend en charge la compression avec perte et la compression sans perte
• Prend en charge la transparence et l'animation

convient à  : application ou page Web prenant en charge webp

格式	优点	缺点	适用场景
gif	文件小，支持动画、透明，无兼容性问题	只支持256种颜色	色彩简单的logo、icon、动图
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

6. Quels sont les sélecteurs CSS ? Priorité?

Si vous devez sélectionner un élément immédiatement après un autre élément et que les deux ont le même élément parent, vous pouvez utiliser le sélecteur frère adjacent. Par exemple, si vous souhaitez augmenter la marge supérieure du paragraphe qui apparaît immédiatement après le. h1 element , peut s'écrire comme ceci :

h1 + p {margin-top:50px;}

Pour la priorité du sélecteur :

• sélecteur d'élément : 1
• sélecteur de classe : 10
• sélecteur d'id : 100
• Balise d'élément : 1000

Il est à noter que :

• !important style déclaré Le plus haut priorité
• Si les priorités sont les mêmes, le dernier style prendra effet
• Le style hérité a la priorité la plus basse

Héritage d'attribut :

• Attributs hérités : font-size, font-family, color
• Styles non héritables : border, padding, margin, width, height

7. Après avoir flotté- Les éléments

associés sont définis pour flotter, l'affichage deviendra automatiquement bloc.

(1) Quand les flotteurs doivent-ils être dégagés ?

Les problèmes causés par le flottement sont les suivants :

• La hauteur de l'élément parent ne peut pas être étendue, ce qui affecte les éléments au même niveau que le parent
• Éléments sans niveau au même niveau que l'élément flottant Les éléments flottants le suivent
• Si un élément flotte, l'élément qui le précède doit également flotter, sinon cela affectera la structure de la page

(2) Comment effacer les flotteurs ?

La façon d'effacer les flottants est la suivante :

• Définissez l'attribut height pour le parent p
• Ajoutez une balise p vide après le dernier élément flottant , et ajoutez clear:both Style
• Ajouter overflow:hidden ou overflow:auto

Répertoire

• 1. Modèle de boîte en CSS3
• 2. >3. Parlons des sprites CSS
• 4. Quelles sont les valeurs d'attribut de position ?
• 5. Quelles sont les différences entre PNG, GIF, JPG et WEBP et comment choisir ?
• 6. Que sont les sélecteurs CSS ? Priorité?
• 7. Concernant les flotteurs
• (1) Quand dois-je nettoyer les flotteurs ?
  • (2) Comment effacer les flotteurs ?
1. Modèle de boîte en CSS3

Il existe deux types de modèles de boîte en CSS3 : le modèle de boîte standard et le modèle de boîte IE

La différence entre le modèle de boîte standard et le modèle de boîte IE est la suivante : la largeur et la hauteur du modèle de boîte standard se réfèrent au largeur et hauteur du contenu. La largeur et la hauteur du modèle de boîte IE font référence à la somme du contenu, du remplissage et des bordures.
En CSS3, vous pouvez utiliser
• pour convertir un modèle de boîte normal en modèle de boîte IE. Parfois, nous avons défini la largeur et la hauteur d'une boîte, mais si nous voulons changer

  , pour que la taille de la boîte change, nous pouvons la convertir en modèle de boîte IE sans avoir à calculer la taille de la boîte contenu à chaque fois. box-sizeing:border-boxborder

dans le modèle de boîte

• représente le modèle de boîte standard (par défaut)
  • box-sizeing:content-box
  représente le modèle de boîte IE (C'est-à-dire le modèle de boîte bizarre)
  • box-sizeing:border-box
De plus, il existe :

Modèle de boîte élastique Flex

2. La différence entre display:none et visible:hidden

Les deux attributs rendent l'élément masqué

Différence :

( 1) Dans l'arbre de rendu,

fera disparaître complètement l'élément de l'arbre de rendu et n'occupera aucun espace lors du rendu
• display:none
L'élément sera ne disparaîtra pas de l'arbre de rendu. L'élément rendu occupera toujours l'espace correspondant, mais le contenu ne sera pas visible
• visibility:hidden
(2) Hériter

Oui. ou non Si les attributs sont hérités, ses nœuds descendants disparaîtront de l'arbre de rendu avec le nœud parent, et ils ne pourront pas être affichés en modifiant les attributs des nœuds descendants.
• display:none
est un attribut hérité. Les nœuds descendants disparaissent car ils héritent de
• En définissant visibility:hidden, les nœuds descendants peuvent être affichés. hiddenvisibility:visible
(3) La modification

d'un élément dans le flux de documents régulier entraînera généralement la réorganisation du document, mais la modification de l'attribut

entraînera uniquement le redessinage de l'élément displayvisibility(4) Si un lecteur d'écran est utilisé, le contenu défini sur

ne sera pas lu, mais le contenu défini sur

sera lu. display:nonevisibility:hiddenvisibility:hidden3. Parlons des sprites CSS

Concept :

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。

优点：

• 减少HTTP请求数，在一定程度上提高了页面的加载速度
• 减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数
• 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
• 减少了图片命名的困扰，只要给一张或几张图片命名即可

缺点：

• La maintenance est problématique. Si l'arrière-plan de la page change légèrement, l'intégralité de l'image fusionnée doit être modifiée.
• La fusion est problématique. Plusieurs images doivent être fusionnées en une seule image de manière ordonnée et raisonnable. Réservez également une certaine quantité d'espace pour éviter les arrière-plans inutiles
• Dans les pages adaptatives sous écrans larges ou haute résolution, si l'image n'est pas assez large, l'arrière-plan peut être cassé

4. Quelles sont les valeurs d'attribut de position ?

属性值	概述
absolute	生成绝对定位的元素，相对于static定位以外的一个父元素进行定位
relative	生成相对定位的元素，相对于其原来的位置进行定位
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位
static	默认值，没有定位，元素出现在正常的文档流中
inherit	规定从父元素继承position属性的值

5. Quelles sont les différences entre PNG, GIF, JPG et WEBP et comment choisir ?

(1) GIF

• Les images GIF stockent uniquement des index 8 bits et prennent en charge jusqu'à 256 couleurs
• utilise une compression sans perte et a une taille plus petite
Prend en charge les animations transparentes et simples

Applicable à  : logo couleur simple, icône, filaire, animation simple

(2) JPG

En utilisant la compression avec perte, vous pouvez contrôler la qualité de la compression
• En utilisant la couleur directe, des couleurs riches
• Ne prend pas en charge la transparence

Applicable dans  : Images colorées, images dégradées

(3) PNG

png-8 est un format bitmap qui utilise une compression sans perte et est basé sur une indexation 8 bits Les couleurs. GIF a un meilleur support pour la transparence et une taille plus petite avec la même qualité, mais il ne prend pas en charge l'animation. Convient aux icônes, arrière-plans, boutons.
• png-24 utilise une compression sans perte et est un format bitmap basé sur la couleur directe. La taille est plus grande que celles ci-dessus, mais la qualité de l'image est élevée. Il convient à l'enregistrement de fichiers sources ou de formats d'image requis. édition secondaire.

(4) WEBP

Développé par Google, de plus petite taille
• Prend en charge la compression avec perte et la compression sans perte
• Prend en charge la transparence et l'animation

convient à  : application ou page Web prenant en charge webp

格式	优点	缺点	适用场景
gif	文件小，支持动画、透明，无兼容性问题	只支持256种颜色	色彩简单的logo、icon、动图
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

6. Quels sont les sélecteurs CSS ? Priorité?

Si vous devez sélectionner un élément immédiatement après un autre élément et que les deux ont le même élément parent, vous pouvez utiliser le sélecteur frère adjacent. Par exemple, si vous souhaitez augmenter la marge supérieure du paragraphe qui apparaît immédiatement après le. h1 element , peut s'écrire comme ceci :

h1 + p {margin-top:50px;}

Pour la priorité du sélecteur :

• sélecteur d'élément : 1
• sélecteur de classe : 10
• sélecteur d'id : 100
• Balise d'élément : 1000

Il est à noter que :

• !important style déclaré Le plus haut priorité
• Si les priorités sont les mêmes, le dernier style prendra effet
• Le style hérité a la priorité la plus basse

Héritage d'attribut :

• Attributs hérités : font-size, font-family, color
• Styles non héritables : border, padding, margin, width, height

7. Après avoir flotté- Les éléments

associés sont définis pour flotter, l'affichage deviendra automatiquement bloc.

(1) Quand les flotteurs doivent-ils être dégagés ?

Les problèmes causés par le flottement sont les suivants :

• La hauteur de l'élément parent ne peut pas être étendue, ce qui affecte les éléments au même niveau que le parent
• Éléments sans niveau au même niveau que l'élément flottant Les éléments flottants le suivent
• Si un élément flotte, l'élément qui le précède doit également flotter, sinon cela affectera la structure de la page

(2) Comment effacer les flotteurs ?

La façon d'effacer les flottants est la suivante :

• Définissez l'attribut height pour le parent p
• Ajoutez une balise p vide après le dernier élément flottant , et ajoutez clear:bothStyle
• Ajouter overflow:hidden ou overflow:auto

à la balise parent contenant l'élément flottant : Tutoriels associés recommandés : CSS tutoriel vidéo

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!