Quelques questions d'entretien sur CSS

Cet article partage principalement avec vous une question d'entretien sur CSS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

1 Le problème du chevauchement des marges supérieure et inférieure

Enroulez une couche de conteneurs autour des éléments qui se chevauchent et déclenchez la génération du conteneur A BFC.
Exemple :

<p class="aside"></p>
<p class="text">
    <p class="main"></p>
</p>
<!--下面是css代码-->
 .aside {
            margin-bottom: 100px;  
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一个p，通过改变此p的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
            overflow: hidden;  //此时已经触发了BFC属性。
        }

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

2 Après avoir défini l'élément sur float, quelle est la valeur d'affichage de l'élément ?

change automatiquement pour display:block

3 Avez-vous déjà utilisé des requêtes multimédias pour la mise en page mobile ?

Grâce aux requêtes multimédias, vous pouvez définir différents CSS pour des médias de différentes tailles et dimensions afin de vous adapter à l'affichage de l'appareil correspondant.

1. inside

2. CSS : @media uniquement écran et (max-device-width:480px) {/style CSS/}

4 Utilisez-vous un préprocesseur CSS ?

Moins d'audace

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

1. Éviter les contraintes excessives

2. Éviter les sélecteurs descendants

3. Évitez les sélecteurs de chaîne

4. Utilisez une syntaxe compacte

5. Évitez les espaces de noms inutiles

6. Évitez les duplications inutiles

7. C'est mieux utiliser des noms sémantiques. Un bon nom de classe devrait décrire de quoi il s'agit plutôt que quelque chose comme

8. Éviter ! important, vous pouvez choisir d'autres sélecteurs

9. pour rationaliser au maximum les règles, vous pouvez fusionner les règles répétées dans différentes catégories

6 Comment le navigateur analyse-t-il les sélecteurs CSS ?

Les sélecteurs CSS sont analysés de droite à gauche. Si la correspondance de gauche à droite s'avère incompatible avec les règles, un retour en arrière sera nécessaire, ce qui entraînera une perte de performances importante. En cas de correspondance de droite à gauche, recherchez d'abord tous les nœuds les plus à droite. Pour chaque nœud, recherchez vers le haut son nœud parent jusqu'à ce que l'élément racine ou une règle correspondante qui remplisse les conditions soit trouvé, puis le parcours de cette branche se termine. Les performances des deux règles de correspondance sont très différentes car la correspondance de droite à gauche filtre un grand nombre de nœuds les plus à droite (nœuds feuilles) qui ne remplissent pas les conditions de la première étape, tandis que les performances des règles de correspondance de gauche à gauche sont très différentes. bonne règle de correspondance Tout est gaspillé lors de recherches infructueuses.
Une fois le CSS analysé, les résultats analysés doivent être analysés avec le contenu de l'arborescence DOM pour créer un arbre de rendu, qui est finalement utilisé pour le dessin. Lors de la création d'un arbre de rendu (le processus « Pièce jointe » dans WebKit), le navigateur doit déterminer quel type d'arbre de rendu générer pour chaque élément de l'arborescence DOM en fonction des résultats de l'analyse CSS (règles de style).

7 Devez-vous utiliser un nombre pair ou impair de polices sur les pages Web ? Pourquoi?

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

8 margin和padding分别适合什么场景使用？

何时使用margin：

1. 需要在border外侧添加空白

2. 空白处不需要背景色

3. 上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

1. 需要在border内侧添加空白

2. 空白处需要背景颜色

3. 上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

9 元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

10 全屏滚动的原理是什么？用到了CSS的哪些属性？

1. 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

2. overflow：hidden；transition：all 1000ms ease；

11 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

<
meta 
name
=
"’viewport’"
 
content
=
"”width=device-width,"
 
initial
-
scale
=
"1."
 
maximum
-
scale
=
"1,user-scalable=no
”"
/>

12 视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

1. CSS3实现
   优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器

2. jQuery实现
   通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
   优点：能兼容到各个版本的，效果可控性好
   缺点：开发起来对制作者要求高

3. 插件实现方式
   例如：parallax-scrolling，兼容性十分好

13 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

1. 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

2. ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

14 你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。

多行文本垂直居中：需要设置display属性为inline-block。

15 怎么让Chrome支持小于12px 的文字？

p
{
font
-
size
:
10px
;
-
webkit
-
transform
:
scale
(
0.8
);}
 
//0.8是缩放比例

16 让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

17 position:fixed;在android下无效怎么处理？

meta 
name
=
"viewport"
 
content
=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>

18 如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

19 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：

1. 可以将

2. 代码全部写在一排

3. 浮动li中float：left

4. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

20 display:inline-block 什么时候会显示间隙？

1. 有空格时候会有间隙 解决：移除空格

2. Solution lorsque la marge est positive : utiliser une valeur négative pour la marge

3. Solution lorsque la taille de la police est utilisée : police - taille : 0, espacement des lettres, espacement des mots

21 Il y a un p adaptatif en hauteur avec deux p dedans, un avec un hauteur de 100px, en espérant qu'un autre remplira la hauteur restante

Le p externe utilise position: relative; le p qui nécessite une hauteur adaptative utilise position: absolue; 100px ; bas : 0 ; gauche : 0

22 Expliquez ces formats d'image png, jpg et gif et quand les utiliser. Avez-vous déjà entendu parler de Webp ?

1. png est un graphique réseau portable (Portable Network Graphics) est un format de fichier bitmap de compression de données sans perte. Les avantages sont : taux de compression élevé, couleur. bien. Disponible dans la plupart des endroits.

2. jpg est une méthode de compression de distorsion utilisée pour les photos. Il s'agit d'une compression destructrice qui permet des changements fluides de ton et de couleur. Un format utilisé pour stocker et transmettre des photos sur www.

3. gif est un format de fichier bitmap qui reproduit des images en vraies couleurs avec des couleurs 8 bits. Des effets d'animation peuvent être obtenus.

4. Le format webp est un format d'image lancé par Google en 2010. Le taux de compression n'est que de 2/3 de celui du jpg, et le la taille est 45 % plus petite que png %. Les inconvénients sont que la compression prend plus de temps et que la compatibilité n'est pas bonne. Actuellement, Google et Opera le prennent en charge.

23 Quelle est la différence entre écrire la balise de style après le corps et avant le corps ?

La page se charge de haut en bas. Bien sûr, le style est chargé en premier.
est écrit après la balise body. Puisque le navigateur analyse le document HTML ligne par ligne, l'analyse de la feuille de style écrite à la fin (contour ou écrite dans la balise style) amènera le navigateur à arrêter le rendu précédent et à attendre. chargement. Et si la feuille de style est restituée une fois l'analyse de la feuille de style terminée, le phénomène FOUC peut se produire sous IE sous Windows (c'est-à-dire le problème de scintillement de la page causé par un échec de style)

24 Définition de l'attribut de débordement d'attribut CSS Comment le contenu de la zone de contenu de l'élément de débordement sera-t-il géré

Lorsque le paramètre est scroll, un scroll ? une barre apparaîtra.
Lorsque le paramètre est auto, une barre de défilement apparaîtra lorsque le contenu de l'élément enfant est plus grand que l'élément parent.
Lorsque le paramètre est visible, le contenu du débordement apparaît en dehors de l'élément parent.
Lorsque le paramètre est masqué, le débordement sera masqué.

25 Expliquer les sprites CSS

Inclure toutes les images impliquées dans une page dans une grande image Go, puis utiliser la combinaison de CSS background-image, background-repeat et background-position pour positionner l'arrière-plan. L'utilisation de CSS Sprites peut réduire considérablement les requêtes http des pages Web, améliorant ainsi considérablement les performances de la page ; les CSS Sprites peuvent réduire les octets des images.

Recommandations de tutoriel associées : 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!