[Compilation et partage] 75 points de test haute fréquence en CSS pour les entretiens front-end

Cet article résumera et partagera avec vous 75points de test haute fréquence en CSS pour les entretiens frontaux afin d'aider les étudiants à réussir le recrutement d'automne. Dépêchez-vous de les récupérer pour étudier !

Théorie

1. Quelle est la fonction de la valeur de l'attribut de taille de boîte ?

Utilisé pour contrôler le mode d'analyse du modèle de boîte de l'élément, la valeur par défaut est content-box

• context-box : le modèle de boîte standard du W3C, définissez l'attribut hauteur/largeur de l'élément auquel faire référence est la hauteur/largeur de la partie contenucontext-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽

• border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content部分的高/宽

【学习视频分享：css视频教程、web前端】

2. absolute 绝对定位，是相对于谁的定位？

CSS position属性用于指定一个元素在文档中的定位方式。

absolute 的元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素进行定位，确定元素位置。绝对定位的元素可以设置外边距，且不会与其他边距合并。

3. 行内元素和块级元素有什么区别？

行内元素：一个行内元素只占据它对应标签的边框所包含的空间。

块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

区别：

• 是否另起一行：认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。

• 是否可设置宽高：块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。 而行内元素设置 width, height 无效。

• 是否可设置内外边距：块级元素都可，行内元素的水平方向的 padding-left/right, margin-left/right 都产生边距效果，但是竖直方向的 padding-top/bottom, margin-top/bottom 都不会产生边距效果。（也就是水平方向有效，竖直方向无效）

• 是否包含对方：块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

4. 常见的行内元素和块级元素有哪些？

1、常见的行内元素

<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img alt="[Compilation et partage] 75 points de test haute fréquence en CSS pour les entretiens front-end" ></select></textarea></button></abbr></small></b></strong></lable></a></span>

2、常见的块级元素

<div>、<p>、</p> <li>、<h1> ~ <h6>、</h6> </h1> <form>、<header>、<hr>、<ol>、</ol> <ul>、<article>、<aside>、<dd>、<dl> <h2 data-id="heading-6"><strong><code>border-box : modèle de boîte traditionnel IE. La définition des attributs hauteur/largeur de l'élément fait référence à la hauteur/largeur de la bordure + remplissage + partie contenu

【Partage de vidéos d'apprentissage : tutoriel vidéo CSS

, front-end web 】

2. absolu Le positionnement absolu est relatif à qui ?

La propriété CSS position est utilisée pour spécifier comment un élément est positionné dans le document.

les éléments absolus seront déplacés hors du flux de documents normal et aucun espace n'est réservé à l'élément. La position de l'élément est déterminée en positionnant l'élément spécifié par rapport à
• l'élément ancêtre positionné non statique
le plus proche. Les éléments positionnés de manière absolue peuvent avoir des marges définies et ne fusionneront pas avec d'autres marges.
3. Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?

Éléments en ligne : Un élément en ligne n'occupe que l'espace contenu par la bordure de son étiquette correspondante.

Éléments de niveau bloc : Un élément de niveau bloc occupe tout l'espace de son élément parent (conteneur), créant ainsi un "bloc".

Différence :

S'il faut démarrer une nouvelle ligne🎜 : Par défaut, les éléments en ligne ne commenceront pas sur une nouvelle ligne, mais les éléments de niveau bloc commenceront sur une nouvelle ligne. 🎜🎜🎜🎜🎜Si la largeur et la hauteur peuvent être définies🎜 : les éléments de niveau bloc peuvent définir les attributs de largeur et de hauteur. Remarque : même si la largeur est définie pour les éléments de niveau bloc, ils occupent toujours une ligne exclusive. La définition de la largeur et de la hauteur des éléments en ligne n'est pas valide. 🎜🎜🎜🎜🎜Est-il possible de définir des marges intérieures et extérieures🎜 : les éléments au niveau du bloc peuvent être utilisés. Le remplissage horizontal gauche/droite et la marge gauche/droite des éléments en ligne produiront des effets de marge, mais le remplissage vertical-. haut/bas, marge-haut/bas ne produiront pas d'effets de marge. (C'est-à-dire que la direction horizontale est valide et la direction verticale n'est pas valide) 🎜🎜🎜🎜🎜Qu'il contienne les autres 🎜 : les éléments de niveau bloc peuvent contenir des éléments en ligne et des éléments de niveau bloc. Les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc🎜🎜🎜

🎜4 Quels sont les éléments en ligne et les éléments de niveau bloc courants ? 🎜🎜🎜1. Éléments en ligne communs🎜🎜<span>, <a>, <lable>, <strong>, <b>, <small>, <abbr>, , <input>, <textarea>, <select>, <img alt="[Compilation et partage] 75 points de test haute fréquence en CSS pour les entretiens front-end" ></select></textarea></abbr></small></b></strong></lable></a></span>🎜🎜2 Éléments communs au niveau du bloc🎜🎜<div>, <p> </p> <li>, <h1> ~ <h6>, </h6> </h1> <form>, <en-t>, <hr>, <ol>, </ol> <ul>, <article>, <dd>,<dl>🎜🎜🎜5. Comment détecter la taille de police minimale prise en charge par le navigateur ? 🎜🎜🎜Vous pouvez utiliser JS pour définir la police DOM sur une certaine valeur, puis la supprimer si la valeur est définie avec succès, cela signifie qu'elle est prise en charge. 🎜🎜🎜6. Que signifie "flex:1;" en CSS ? 🎜🎜🎜flex est l'abréviation de flex-grow, flex-shrink et flex-basis. 🎜🎜En plus des deux valeurs de raccourci auto (1 1 auto) et none (0 0 auto), il existe également les méthodes de réglage suivantes : 🎜🎜🎜Lorsque la valeur flex est un nombre non négatif, le nombre est la valeur flex-grow, flex-shrink prend 1, flex-basis prend 0%, les éléments suivants sont équivalents : <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.item {flex: 1;} .item {     flex-grow: 1;     flex-shrink: 1;     flex-basis: 0%; }</pre><div class="contentsignin">Copier après la connexion</div></div>🎜🎜Lorsque la valeur flex est 0, les trois valeurs correspondantes sont 0 1 0%<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.item {flex: 0;} .item {     flex-grow: 0;     flex-shrink: 1;     flex-basis: 0%; }</pre><div class="contentsignin">Copier après la connexion</div></div>🎜🎜🎜Pour pour plus de méthodes d'écriture, veuillez vous rendre sur 🎜MDN-flex🎜 View 🎜🎜🎜7 Que sont les requêtes multimédias CSS ? 🎜🎜🎜Les Media Queries existaient dès l'ère CSS2, et sont devenues plus puissantes après le baptême de CSS3. Les fonctionnalités réactives du bootstrap viennent de là 🎜🎜En termes simples, les requêtes multimédias sont une sorte de syntaxe de modification du CSS. quand il prend effet. L'introduction des requêtes multimédias vous permet d'ajouter des expressions pour déterminer l'environnement multimédia pour appliquer différentes feuilles de style. En d'autres termes, cela nous permet de modifier la mise en page de la page pour l'adapter avec précision aux différents appareils sans changer le contenu🎜<h2 data-id="heading-9"><strong>8. Lors de l'importation de styles sur une page, quelle est la différence entre utiliser link et @import ? </strong></h2> <ul> <li><p>link est une balise HTML, et @import est fourni par css </p></li> <li><p>Lorsque la page est chargée, le lien sera chargé en même temps, et le css référencé par @import attendra que la page soit chargée. est chargé avant le chargement ; </p></li> <li><p>link est une balise XHTML et n'a aucun problème de compatibilité, tandis que @import ne peut être reconnu que dans IE5 ou supérieur ; le poids du style </p></li> <li><p>link est supérieur à celui de @import. </p></li> </ul> <h2 data-id="heading-10"><strong>9. Pourquoi CSS ne prend-il pas en charge les sélecteurs parents ? </strong></h2> <p>La réponse à cette question est la même que "Pourquoi le sélecteur de frère adjacent CSS ne prend-il en charge que les éléments suivants et non les éléments frères précédents ?" </p> <p>Le navigateur analyse le document HTML d'avant en arrière, de l'extérieur vers l'intérieur. Par conséquent, nous voyons souvent la situation de chargement dans laquelle l’en-tête de la page apparaît en premier, puis le contenu principal apparaît. </p> <p>Cependant, si CSS prend en charge le sélecteur parent, alors tous les éléments enfants de la page doivent être chargés avant que le document HTML puisse être rendu, car le soi-disant « sélecteur parent » signifie que les éléments descendants affectent les éléments ancêtres. n'ont pas encore été chargés, Comment affecter le style des éléments ancêtres ? En conséquence, la vitesse de rendu des pages Web sera considérablement ralentie et le navigateur aura un long tableau blanc. De manière générale, cela est déterminé par le mécanisme de rendu du CSS et du HTML lui-même. </p> <h2 data-id="heading-11"><strong>10. À quels scénarios la marge et le remplissage sont-ils adaptés ? </strong></h2> <p>Quand utiliser la marge : </p> <ul> <li>Besoin d'ajouter de l'espace à l'extérieur de la bordure </li> <li>Aucune couleur de fond n'est requise dans l'espace </li> <li>Lorsque l'espace entre deux cases connectées de haut en bas doit se compenser. </li> </ul> <p>Quand utiliser le remplissage : </p> <ul> <li>Besoin d'ajouter un blanc à l'intérieur de la bordure</li> <li>Le blanc a besoin d'une couleur de fond</li> <li>Le blanc des deux cases reliées de haut en bas, j'espère que c'est la somme des deux. </li> </ul> <h2 data-id="heading-12"><strong>11. Quelles sont les valeurs d'affichage ? </strong></h2> <p>Les plus courants sont les suivants :</p> <table> <thead><tr class="firstRow"> <th align="center">valeur</th> <th align="center">description</th> </tr></thead> <tbody> <tr> <td align="center">aucun</td> <td align="center">L'élément ne sera pas affiché</td> </tr> <tr> <td align="center">bloc</td> <td align="center">Cet élément sera affiché comme un bloc- élément de niveau, et sera précédé et suivi de cet élément Il y a des nouvelles lignes. </td> </tr> <tr> <td align="center">en ligne</td> <td align="center">Par défaut. Cet élément sera affiché comme un élément en ligne sans saut de ligne avant ou après l'élément. </td> </tr> <tr> <td align="center">inline-block</td> <td align="center">Élément de bloc en ligne. Vous pouvez définir la largeur et la hauteur et les afficher côte à côte. </td> </tr> <tr> <td align="center">inline-table</td> <td align="center">Cet élément sera affiché sous forme de tableau en ligne (semblable à un tableau), sans saut de ligne avant et après le tableau. </td> </tr> <tr> <td align="center">table</td> <td align="center">Cet élément sera affiché sous forme de tableau au niveau d'un bloc (semblable à un tableau), avec des sauts de ligne avant et après le tableau. </td> </tr> <tr> <td align="center">inherit</td> <td align="center"> spécifie que la valeur de l'attribut display doit être héritée de l'élément parent. </td> </tr> <tr> <td align="center">grid</td> <td align="center">Grid est la solution de mise en page CSS la plus puissante. Il divise les pages Web en grilles et différentes grilles peuvent être combinées arbitrairement pour créer différentes mises en page. </td> </tr> <tr> <td align="center">flex</td> <td align="center">La disposition flexible est utilisée pour offrir une flexibilité maximale aux modèles en forme de boîte. </td> </tr> </tbody> </table> <p>其他的可以自行查阅：<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" textvalue="MDN-display">MDN-display</a></p> <h2 data-id="heading-13"><strong>12. 两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？</strong></h2> <p>行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。</p> <p>解决方法：</p> <ul> <li>相邻元素代码代码全部写在一排</li> <li>浮动元素，float:left;</li> <li>在父级元素中用font-size:0;</li> </ul> <h2 data-id="heading-14"><strong>13. CSS 中，有哪些方式可以隐藏页面元素？有什么区别？</strong></h2> <p><strong>display:none</strong>：元素不可见，不占据空间，无法响应点击事件</p> <p><strong>visibility:hidden</strong>：元素不可见，占据页面空间，无法响应点击事件</p> <p><strong>opacity:0</strong>：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件</p> <p><strong>设置height、width属性为0</strong>：将元素的 margin，border，padding，height和width 等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其 overflow:hidden 来隐藏其子元素。特点：元素不可见，不占据页面空间，无法响应点击事件</p> <p><strong>position:absolute</strong>： 将元素移出可视区域，元素不可见，不影响页面布局</p> <p><strong>clip-path</strong>：通过裁剪的形式，元素不可见，占据页面空间，无法响应点击事件</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>最常用的还是<code>display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

#	display: none	visibility: hidden	opacity: 0
页面中	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

14. Pourquoi les projets front-end doivent-ils initialiser les styles CSS ?

En raison de problèmes de compatibilité des navigateurs, différents navigateurs ont des valeurs par défaut différentes pour les balises. Si le CSS du navigateur n'est pas initialisé, l'affichage de la même page dans différents navigateurs sera différent.

15. Quelle est la différence entre display:none et visibilité:hidden ?

En termes de performances,

• display:none disparaît complètement et n'occupe pas de place dans le flux de documents, et le navigateur n'analysera pas l'élément
• visibility:hidden disparaît visuellement, ce qui peut être compris ; comme transparence de 0 L'effet est d'occuper une place dans le flux du document, et le navigateur analysera l'élément

En termes de performances

• en utilisant la visibilité : caché est meilleur que l'affichage : aucun en termes de ; performances Lorsque display:none change l'affichage, la page sera redistribuée (lorsque certains éléments de la page doivent modifier la taille, la mise en page, l'affichage, le masquage, etc., la page est reconstruite. Il s'agit d'une redistribution (toutes les pages doivent le faire). générer une redistribution lorsqu'ils sont chargés pour la première fois), et lorsque la visibilité change d'affichage ou non, cela ne provoquera pas de redistribution.

16. Quelles nouvelles fonctionnalités CSS3 ajoute-t-il ?

Sélecteurs : sélecteur universel de frères et sœurs, sélecteur de pseudo-classe, sélecteur de pseudo-éléments, sélecteur négatif, sélecteur de pseudo-classe d'état

Nouveaux styles : bordure, ombre de boîte, arrière-plan, texte, couleur

• border :

  • border-radius : Créer une bordure arrondie
  • box-shadow : Ajouter une ombre à un élément
  • border-image : Utiliser une image pour dessiner une bordure

• Arrière-plan : Plusieurs nouveaux attributs liés à l'arrière-plan ont été ajoutés, à savoir background-clip, background-origin, background-size et background- pausebackground-clip、background-origin、background-size和background-break

• 文字：word-wrap、text-overflow、text-shadow、text-decoration

过渡：transition

转换：transform

动画：animation

其他：渐变、flex弹性布局、Grid栅格布局、媒体查询、混合模式等等...

17. 什么是硬件加速？

• 硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition

• texte : retour à la ligne, débordement de texte, ombre de texte, décoration de texte

• transition

  : transition

transformation: transformation

animation
• : animation

Autres
•  : dégradé, disposition élastique flex, disposition en grille Grille, requête multimédia, mode de fusion, etc...

  17. Qu'est-ce que l'accélération matérielle ?

L'accélération matérielle consiste à confier le processus de rendu du navigateur au GPU au lieu d'utiliser le moteur de rendu plus lent intégré. Cela rendra l'animation et la transition plus fluides.
Nous pouvons utiliser CSS pour activer l'accélération matérielle dans le navigateur afin de permettre au GPU (Graphics Processing Unit) de fonctionner, améliorant ainsi les performances.

La plupart des cartes graphiques d'ordinateur prennent désormais en charge l'accélération matérielle. Compte tenu de cela, nous pouvons utiliser la puissance du GPU pour rendre notre site Web ou notre application plus fluide.

18. Quelle est la différence entre les deux points et les deux points simples dans ::avant et :après ? Expliquez ce qu'ils font ?

Le simple deux-points (:) est utilisé pour les pseudo-classes CSS3. Généralement, il correspond à certains états spéciaux d'éléments, tels que le survol, le lien, etc.

🎜Le double deux-points (::) est utilisé pour CSS3. pseudo-éléments (pseudo-éléments) Composés de doubles deux-points et de noms de pseudo-éléments), et les pseudo-éléments correspondent généralement à des positions spéciales, telles que après, avant, etc. 🎜🎜🎜🎜Les pseudo-éléments introduits dans le nouveau CSS3 ne sont plus autorisés à supporter l'ancienne méthode d'écriture avec deux points simples🎜🎜🎜🎜Si vous souhaitez que le contenu inséré apparaisse avant les autres contenus, utilisez ::before, sinon utilisez :: after, en termes d'ordre du code, le contenu généré par ::after est également postérieur au contenu généré par ::before🎜🎜🎜🎜pseudo-class🎜🎜🎜19. Quel est l'ordre des règles de correspondance CSS ? 🎜🎜🎜Je pense que la plupart des débutants penseront que la correspondance CSS se fait de gauche à droite, mais c'est en réalité le contraire. 🎜🎜La correspondance CSS se produit lorsque l'arbre de rendu est construit (Chrome Dev Tools l'attribue au processus de mise en page). À l'heure actuelle, le navigateur a construit le DOM et obtenu le style CSS. Ce qu'il faut faire à ce stade, c'est faire correspondre le style avec les nœuds du DOM. Ce que le navigateur doit faire pour améliorer les performances, c'est une correspondance rapide. . 🎜🎜Tout d'abord, précisons que le navigateur recherche la règle correspondante pour un nœud "visible". Ceci est différent du sélecteur jQuery. Ce dernier utilise une règle pour trouver le nœud correspondant, il peut donc être plus rapide. de gauche à droite. Mais pour le premier, en raison de la taille énorme du CSS, il peut y avoir des milliers de règles dans un fichier CSS, et pour le nœud actuel, la plupart des règles ne peuvent pas correspondre. Si vous y réfléchissez un instant, vous le saurez. que si vous commencez la correspondance par la droite (également par la droite) En partant d'une position plus précise), la plupart des nœuds inappropriés peuvent être éliminés plus rapidement. Si vous commencez par la gauche, vous ne trouverez l'échec de la correspondance qu'en approfondissant. Si la plupart des règles sont plus profondes, ce sera un gaspillage de ressources. 🎜🎜En plus de ce qui précède, nous avons également mentionné plus tôt que la construction du DOM se fait "étape par étape", et que DOM ne bloque pas la construction de l'arbre de rendu (uniquement les blocs CSSOM), ce qui permet également aux éléments d'être rendus plus tôt sur le site. page. 🎜🎜Considérez la situation suivante. Si nous construisons seulement une partie du DOM à ce moment-là et que le CSSOM est terminé, le navigateur construira l'arbre de rendu. 🎜

À ce stade, pour chaque nœud, si une règle qui correspond de droite à gauche est trouvée, il suffit d'observer si le nœud parent du nœud correspond couche par couche, et son nœud parent doit déjà être sur le DOM à cette fois.

Mais à l'inverse, nous pouvons faire correspondre un nœud qui n'existe pas encore sur le DOM, et le processus de mise en correspondance à ce moment gaspille des ressources.

20. Quelles sont les méthodes pour optimiser et améliorer les performances CSS ? Éviter les contraintes excessives

éviter les inutiles La répétition de
Il est préférable d'utiliser des noms sémantiques. Un bon nom de classe doit décrire ce que c'est plutôt que ce à quoi il ressemble
Évitez !important, vous pouvez choisir d'autres sélecteurs
Règles concises autant que possible, vous pouvez fusionner des règles répétées dans différentes classes
• 21. Quelle est la différence si la balise de style est écrite avant ou après le corps ?

Le chargement de la page s'effectue de haut en bas. Bien entendu, le style est chargé en premier.

• É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) entraînera l'arrêt du rendu précédent par le navigateur et l'attente du chargement. Après avoir analysé la feuille de style et effectué un nouveau rendu, le phénomène FOUC peut se produire sous Windows IE (c'est-à-dire le problème de scintillement de la page causé par un échec de style)

• 22 Il s'agit du réglage du pourcentage vertical de l'élément par rapport à la hauteur du conteneur. ?

Lors de la définition de la largeur d'un élément en pourcentage, elle est calculée par rapport à la largeur du conteneur parent. Cependant, pour certaines propriétés qui représentent la distance verticale, telles que padding-top, padding-bottom, margin-top, margin. -bottom etc., lors de leur définition en pourcentage, sont également basés sur la largeur du conteneur parent, et non sur la hauteur.

• 23. Quelle est la différence entre transition et animation ?
transition est un attribut de transition surestimé. Son implémentation doit déclencher un événement (tel qu'un mouvement de la souris, un focus, un clic, etc.) avant d'exécuter l'animation. C'est similaire à l'animation d'interpolation flash, en définissant une image clé de début et une image clé de fin.

animation est un attribut d'animation. Son implémentation ne nécessite pas de déclenchement d'événements. Il peut être exécuté par lui-même après avoir réglé l'heure, et une animation peut être bouclée. Elle est également similaire à l'animation Flash Tween, mais elle peut définir plusieurs images clés (définies avec @keyframe) pour compléter l'animation.

24. Parlez-moi de votre compréhension du modèle de boîte ?

Lors de la mise en page d'un document, le moteur de rendu du navigateur représentera tous les éléments sous forme de boîtes rectangulaires basées sur l'un des standards, le modèle de boîte de base CSS )

Une boîte se compose de quatre parties : contenu, <code>padding, border, margin

Modèle de boîte standard : modèle de boîte standard, qui est le modèle de boîte par défaut du navigateur

• Comme vous peut voir sur l'image ci-dessus :

  transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。

• animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

24. 说说你对盒子模型的理解？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

标准盒子模型：标准盒子模型，是浏览器默认的盒子模型

从上图可以看到：

• 盒子总宽度 = width + padding + border + margin;
• 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border 值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

IE 怪异盒子模型

从上图可以看到：

• 盒子总宽度 = width + margin;
• 盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border 

La largeur totale de la boîte = largeur + rembourrage + bordure + marge

La hauteur totale de la boîte = hauteur + rembourrage + bordure + marge

C'est-à-dire width/height est uniquement la hauteur du contenu et n'inclut pas les valeurs padding et border

Donc, dans la question ci-dessus, définissez Le la largeur est de 200 px, mais en raison de la présence de padding, la largeur réelle de la boîte est de 240 px

IE Weird box model

• Comme vous pouvez le voir sur l'image ci-dessus :

• La largeur totale de la boîte = largeur + marge ;
  La hauteur totale de la boîte = hauteur + marge ;

C'est-à-dire que largeur/hauteur contient le remplissage et les valeurs border

25 Qu'est-ce qu'Atom CSS ? Quels sont les avantages et les inconvénients ?

• Atom CSS : Atomic CSS signifie qu'une classe ne fait qu'une seule chose.

Différent des règles BEM couramment utilisées, le CSS atomique signifie fractionnement, et toutes les classes CSS ont une règle CSS unique

• Avantages🎜🎜🎜🎜🎜Réduit le volume CSS et améliore la réutilisation du CSS🎜🎜🎜 🎜Réduit la complexité de la dénomination🎜🎜 🎜🎜🎜Inconvénients🎜🎜🎜🎜🎜Augmente le coût de la mémoire. Après avoir divisé CSS en atomes, vous devez vous souvenir de certaines classes avant d'écrire. Même si tailwindcss fournit une chaîne d'outils complète, lorsque vous écrivez en arrière-plan, vous devez vous rappeler que le début est bg. 🎜🎜🎜🎜 Augmente la complexité de la structure HTML. Lorsque l'ensemble du DOM a de tels noms de classe, cela entraînera inévitablement des problèmes de débogage. Parfois, il est difficile de localiser des problèmes CSS spécifiques🎜.

• 你仍需要起class名。对于大部分属性而言，你可以只用到center,auto，100%，这些值，但是有时候你仍需要设定不一样的参数值，例如left，top，这时候你还需要起一个class名

26. 脱离文档流有哪些方法？

• float：使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

• absolute：absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

• fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）

27. CSSOM树和DOM树是同时解析的吗？

浏览器会下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 JS 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 JS 脚本，然后再执行 DOM 解析，此时会阻塞。

28. CSS Sprites 是什么，如何使用？

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

优点：

• 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
• 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
• 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

缺点：

• 图片合成比较麻烦；
• 背景设置时，需要得到每一个背景单元的精确位置；
• 维护合成图片时，最好只是往下加图片，而不要更改已有图片。

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

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

30. canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

• canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。

• 而style的width和height是canvas在浏览器中被渲染的高度和宽度。

• 如果canvas的width和height没指定或值不正确，就被设置成默认值。

31. 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？

真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

<input> <input>

我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题

这种表现是符合规范的应该有的表现。

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

不过，这类间距有时会对我们布局，或是兼容性处理产生影响，以下展示几种方法去掉

• 移除空格：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了

• 使用margin负值

  .space a { 
      display: inline-block; 
      margin-right: -3px; 
  }

• 使用font-size:0

  .space { font-size: 0; } 
  .space a { font-size: 12px; }

• 使用letter-spacing

  .space { letter-spacing: -3px; } 
  .space a { letter-spacing: 0; }

• 使用word-spacing

  .space { word-spacing: -6px; } 
  .space a { word-spacing: 0; }

32. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

它们的优点？

• 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。

• 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

33. CSS3 新增伪类有哪些？

• p:first-of-type 选择属于其父元素的首个元素
• p:last-of-type 选择属于其父元素的最后元素
• p:only-of-type 选择属于其父元素唯一的元素
• p:only-child 选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中
• ...

34. CSS 动画和 JS 实现动画分别有哪些优缺点？

1. CSS动画

优点

• 浏览器可以对动画进行优化
• 代码相对简单,性能调优方向固定
• 对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

• 运行过程控制较弱,无法附加事件绑定回调函数
• 代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

2. JS 动画

优点

• 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
• 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
• CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

• 代码的复杂度高于CSS动画
• JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

35. 为什么会出现浮动？什么时候需要清除浮动？清除浮动的方式有哪些？

什么是浮动：浮动（float）最初是为了让文字环绕图片排布，就想报纸上面的图文混排模式。但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。

什么时候需要清除浮动：

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

• 父级div定义height
• 最后一个浮动元素后加空div标签 并添加样式clear:both。
• 包含浮动元素的父标签添加样式overflow为hidden或auto。
• 父级div定义zoom

36. IconFont 的原理是什么？

IconFont 的使用原理来自于 css 的 @font-face 属性。

这个属性用来定义一个新的字体，基本用法如下：

@font-face { 
    font-family: <yourfontname>; 
    src: <url> [<format>],[<source> [<format>]], *; 
    [font-weight: <weight>]; 
    [font-style: <style>]; 
}</style></weight></format></source></format></url></yourfontname>

• font-family：为载入的字体取名字。
• src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
• font-weight：定义加粗样式。
• font-style：定义字体样式。

37. 分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景

可以从以下三点进行分析

1. 结构

• display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
• visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
• opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2. 继承

• display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
• visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。

3. 性能

• display: none: 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
• visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
• opacity: 0:修改元素会造成重绘，性能消耗较少

38. CSS 中有哪些定位方式？（position有哪些属性值？）

static: 这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。

relative: 相对定位方式，相对于其原来的位置进行定位。会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

absolute: 绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。

fixed: 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。 当父元素使用了transform的时候，会以父元素定位。

sticky: 粘性定位，可以简单理解为relative和fixed布局的混合。当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的，它的定位效果完全受限于父级元素们。

39. flexbox(弹性盒布局模型)是什么，使用什么场景？

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局

采用Flex布局的元素，称为flex容器container

它的所有子元素自动成为容器成员，称为flex项目item

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。每根轴都有起点和终点，这对于元素的对齐非常重要

关于flex常用的属性，我们可以划分为容器属性和容器成员属性

容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

容器成员属性有： order、flex-grow、flex-shrink、flex-basis、flex、align-self

更多属性写法可前往 MDN-flex 查看

40. Quand l'attribut z-index deviendra-t-il invalide ?

Habituellement, le z-index est utilisé lorsqu'il y a deux étiquettes qui se chevauchent. Dans certaines circonstances, l'une d'elles peut être contrôlée pour apparaître au-dessus ou en dessous de l'autre. Plus la valeur de l'indice z est grande, plus elle est élevée. L'attribut position de l'élément z-index doit être relatif, absolu ou fixe.

L'attribut z-index sera invalide dans les circonstances suivantes :

• Lorsque la position de l'élément parent est relative, le z-index de l'élément enfant sera invalide. Solution : modifiez la position de l'élément parent en absolue ou statique ; l'élément

• ne définit pas l'attribut position sur un attribut non statique. Solution : définissez l'attribut position de l'élément sur l'un des valeurs relative, absolue ou fixe ; l'élément

• définit également float lors de la définition du z-index. Solution : Supprimez float et modifiez pour afficher : inline-block ;

41. Comment déclencher BFC et quels sont les scénarios d'application de BFC ?

Cliquez pour accéder à : Une brève discussion de BFC sur la mise en page frontale

42. Le chargement CSS provoquera-t-il un blocage ?

Permettez-moi d'abord de tirer la conclusion :

• le chargement CSS ne bloquera pas l'analyse de l'arborescence DOM
• le chargement CSS bloquera le rendu de l'arborescence DOM
• le chargement CSS bloquera l'exécution des instructions js suivantes

Afin d'éviter de laisser les utilisateurs voir Pendant de longues périodes de temps sur écran blanc, nous devons améliorer autant que possible la vitesse de chargement des CSS. Par exemple, vous pouvez utiliser les méthodes suivantes :

• Utilisez CDN (car le CDN sélectionnera. le contenu mis en cache le plus proche pour vous en fonction des conditions de votre réseau. Le nœud vous fournit des ressources, ce qui peut réduire le temps de chargement)

• Compressez le CSS (vous pouvez utiliser de nombreux outils d'empaquetage, tels que webpack, gulp, etc. , ou vous pouvez activer la compression gzip)

• Utilisez le cache de manière raisonnable (il est bon de définir le contrôle du cache, l'expiration et la balise E, mais une chose à noter est qu'une fois le fichier mis à jour, vous devez éviter l'impact de la mise en cache. L'une des solutions consiste à ajouter un numéro de version après le nom du fichier. )

• Réduisez le nombre de requêtes http, fusionnez plusieurs fichiers CSS ou écrivez simplement des styles en ligne (un inconvénient des styles en ligne est qu'ils ne peuvent pas être mis en cache)

43. Parlez brièvement du processus de rendu du navigateur

Le processus de rendu du navigateur est le suivant :

• HTML analyse les fichiers pour générer l'arborescence DOM, analyse les fichiers CSS pour générer l'arborescence CSSOM.

• Combinez Dom Tree et CSSOM Tree pour générer un arbre de rendu

• Rendu et dessinez selon l'arbre de rendu, en rendant les pixels à l'écran.

Nous pouvons voir à partir du processus :

• L'analyse DOM et l'analyse CSS sont deux processus parallèles, cela explique donc également pourquoi le chargement CSS ne bloque pas l'analyse DOM.

• Cependant, étant donné que l'arbre de rendu dépend de l'arbre DOM et de l'arbre CSSOM, il doit attendre que l'arbre CSSOM soit construit, c'est-à-dire que le chargement des ressources CSS soit terminé (ou que le chargement des ressources CSS échoue) avant de pouvoir commencer le rendu. Par conséquent, le chargement CSS bloquera le rendu Dom.

• Étant donné que js peut fonctionner sur les nœuds Dom et les styles CSS précédents, le navigateur conservera l'ordre des CSS et js en HTML. Par conséquent, la feuille de style sera chargée et exécutée avant l’exécution du js suivant. Par conséquent, CSS bloquera l’exécution des js suivants.

44. Comment js et css affectent-ils la construction de l'arborescence DOM ?

Cliquez pour accéder à : Comment les js et les css affectent-ils la construction de l'arborescence DOM ?

45. Comment comprendre le reflow et le redraw ? Dans quelles circonstances sera-t-il déclenché ?

Cliquez pour accéder à : "Redistribution et redessinage" de la page front-end

46. Quels sont les principes de base du responsive design ? Comment le mettre en œuvre ?

Qu'est-ce que : Le Responsive Web Design est une mise en page de conception de page Web. La conception et le développement de la page doivent être basés sur le comportement de l'utilisateur et l'environnement de l'appareil (plate-forme système, taille de l'écran, orientation de l'écran, etc.). Réponse et ajustement.

La phrase la plus célèbre décrivant l'interface réactive est "Le contenu est comme l'eau". La langue vernaculaire est "Si vous considérez l'écran comme un conteneur, alors le contenu est comme l'eau"

Caractéristiques communes des sites Web réactifs :

• S'adapte simultanément au PC + tablette + téléphone portable
• La navigation par onglets passe à la navigation par tiroir classique à l'approche du terminal portable
• La mise en page du site Web ajustera la taille et la position du module en fonction de la fenêtre d'affichage

Principe de base : Le principe de base de la conception réactive est de détecter différentes tailles d'écran d'appareil via des requêtes multimédias pour le traitement. La mise en œuvre d’une conception réactive réfléchit généralement aux aspects suivants :

• 弹性盒子（包括图片、表格、视频）和媒体查询等技术
• 使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
• 使用相对单位使得内容自适应调节
• 选择断点，针对不同断点实现不同布局和内容展示

总结：

响应式布局优点：

• 面对不同分辨率设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点：

• 仅适用布局、信息、框架并不复杂的部门类型网站
• 兼容各种设备工作量大，效率低下
• 代码累赘，会出现隐藏无用的元素，加载时间加长
• 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
• 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

47. 说说对 CSS 预编语言的理解，主流的有哪些？

理解： 预处理语言扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易维护、方便。本质上，预处理是css的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 css 文件

有哪些： css预编译语言在前端里面有三大优秀的预编处理器，分别是：sass、less、stylus

48. CSS 中1像素问题是什么？有哪些解决方案？

1px边框问题由来： 苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）的概念，在 iPhone4 使用的视网膜屏幕中，把 2x2 个像素当 1 个物理像素使用，即使用 2x2 个像素显示原来 1 个物理像素显示的内容，从而让 UI 显示更精致清晰，这 2x2 个像素叫做逻辑像素。

像这种像素比（像素比（即dpr）＝ 物理像素 / 逻辑像素）为 2 的视网膜屏幕也被称为二倍屏，目前市面上还有像素比更高的三倍屏、四倍屏。

而 CSS 中 1px 指的是物理像素，因此，设置为 1px 的边框在 dpr = 2 的视网膜屏幕中实际占用了 2 个逻辑像素的宽度，这就导致了界面边框变粗的视觉体验。

解决方案：使用 transform 解决

通过设置元素的 box-sizing 为 border-box，然后构建伪元素，再使用 CSS3 的 transform 缩放，这是目前市面上最受推崇的解决方法。这种方法可以满足所有的场景，而且修改灵活，唯一的缺陷是，对于已使用伪元素的元素要多嵌套一个无用元素。具体的实现如下：

.one-pixel-border {
  position: relative;
  box-sizing: border-box;
}

.one-pixel-border::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
}

这样就可以得到 0.5px 的边框。

还可以结合媒体查询（@media）解决不同 dpr 值屏幕的边框问题，如下：

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  ...
}

@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  ...
}

当然还有不少其他的解决方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺点，不进行推荐，此处也不做详细介绍。

49. overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：

-webkit-overflow-scrolling: touch;

是因为这行代码启用了硬件加速特性，所以滑动很流畅。

50. CSS 单位中 px、em 和 rem 的区别？

• px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一 个虚拟长度单位，是计算机系统的数字化图像长度单位

• em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大 小，因此并不是一个固定的值

• rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字 体大小时，仍然是相对大小，但相对的只是 HTML 根元素

区别： IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐 层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

51. Comment utiliser CSS pour améliorer les performances des pages ?

Cliquez pour accéder à : Comment utiliser CSS pour améliorer les performances des pages ?

52. Quelle est la différence entre l'espacement des lettres et l'espacement des mots ?

letter-spacing fonctionne sur tous les caractères, mais word-spacing ne fonctionne que sur les caractères d'espacement. En d’autres termes, le rôle de l’espacement des mots est d’augmenter la largeur des espaces. letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度。

53. 无依赖绝对定位是什么？

没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

54. 层叠准则？

（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

55. font-weight 的特殊性？

如果使用数值作为font-weight属性值，必须是100～900的整百数。因为这里的数值仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。

56. text-indent 的特殊性？

（1）text-indent 仅对第一行内联盒子内容有效。

（2）非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent值无效，如果计算值 inline-block/inline-table 则会生效。

（3）<input>标签按钮 text-indent 值无效。

（4）<button></button>

53. Qu'est-ce que le positionnement absolu sans dépendance ?

Le positionnement absolu sans définir les valeurs d'attribut gauche/haut/droite/bas est appelé « positionnement absolu sans dépendance ». La position du positionnement absolu sans dépendance est liée à la position lorsque position:absolute n'est pas défini.

54. Lignes directrices en cascade ?

(1) Qui est le plus grand : lorsqu'il existe un identifiant de niveau d'empilement évident, tel que la valeur effective de l'attribut z-index, dans le même champ de contexte d'empilement, celui avec une valeur de niveau d'empilement plus grande couvre le plus petit.

(2) Venant de derrière : lorsque les niveaux d'empilement des éléments sont cohérents et que l'ordre d'empilement est le même, les éléments ultérieurs du flux DOM écraseront les éléments précédents.

55. Quelle est la particularité du font-weight ?

Si vous utilisez une valeur numérique comme valeur d'attribut font-weight, elle doit être un entier compris entre 100 et 900. Parce que la valeur numérique ici ne ressemble qu'à une valeur numérique, il s'agit en fait d'un mot-clé avec une signification spécifique, et il existe ici une relation correspondante entre le mot-clé numérique et le mot-clé lettre.

56. Quelles sont les particularités de text-indent ?

(1) text-indent n'est valable que pour la première ligne du contenu de la boîte en ligne.

(2) La définition de la valeur d'indentation de texte pour les éléments en ligne autres que les éléments non remplacés dont la valeur calculée d'affichage est en ligne n'est pas valide. Si la valeur calculée est inline-block/inline-table, elle prendra effet.

(3) La valeur d'indentation du texte du bouton d'étiquette <input> n'est pas valide.

(4)<button></button>La valeur d'indentation du texte du bouton d'étiquette est valide.

(5) La valeur en pourcentage de text-indent est calculée par rapport au "bloc contenant" de l'élément actuel, et non à l'élément actuel.

57. Quels sont les avantages et les inconvénients de l'utilisation de la mise en page rem ?

Avantages :

À une époque de résolutions d'écran très variables, tant que rem est associé à la résolution de l'écran, la mise à l'échelle globale de la page peut être obtenue, rendant l'affichage sur l'appareil unifié. De plus, la plupart des navigateurs prennent désormais en charge rem et la compatibilité est également très bonne.

Inconvénients :

(1) Les performances ne sont pas très bonnes sur les appareils DPR étranges. Par exemple, certains modèles haut de gamme de Huawei provoqueront une confusion lors de l'utilisation de la disposition rem.

(2) Il y aura également des problèmes lors de l'utilisation des références iframe.

(3) rem est incompatible avec les philosophies de conception des deux principales plates-formes actuelles en s'adaptant à plusieurs tailles d'écran. C'est-à-dire si l'émergence des grands écrans vise à voir des choses plus grandes et plus claires, ou à voir plus. question.

58. Quelle est la largeur minimale préférée ?

« Largeur minimale préférée » fait référence à la largeur minimale à laquelle un élément est le plus approprié. La largeur minimale des écritures d'Asie de l'Est (comme le chinois) correspond à la largeur de chaque caractère chinois. La largeur minimale du texte occidental est déterminée par une unité continue spécifique de caractères anglais. Tous les caractères anglais ne forment pas des unités continues et se terminent généralement par des espaces (espaces ordinaires), des tirets, des points d'interrogation et d'autres caractères non anglais. 🎜🎜Si vous souhaitez que les caractères anglais soient identiques au chinois et que chaque caractère utilise l'unité de largeur minimale, vous pouvez essayer d'utiliser word-break:break-all en CSS. 🎜🎜🎜59. Pourquoi la hauteur : 100 % n'est-elle pas valide ? 🎜🎜🎜Pour les éléments du flux de documents normal, pour que la valeur de pourcentage de hauteur fonctionne, son parent doit avoir une valeur de hauteur qui peut prendre effet. 🎜🎜La raison est que si la hauteur du bloc conteneur n'est pas explicitement spécifiée (c'est-à-dire que la hauteur est déterminée par le contenu) et que l'élément n'est pas positionné de manière absolue, la valeur calculée est auto car elle est interprétée comme auto. , il ne peut pas participer au calcul. 🎜🎜Les éléments utilisant le positionnement absolu auront une valeur calculée, même si la hauteur de l'élément ancêtre est calculée comme étant automatique. 🎜🎜🎜60. Écraser les règles entre les attributs min-width/max-width et min-height/max-height ? 🎜🎜🎜(1) max-width remplacera la largeur, même si la largeur est un style de ligne ou si !important est défini. 🎜🎜(2) min-width remplacera max-width Cette règle se produit en cas de conflit entre min-width et max-width. 🎜🎜🎜61. Quel est le modèle de boîte en ligne ? 🎜🎜🎜 (1) Zone de contenu. La zone de contenu fait référence à une zone invisible entourant le texte. Sa taille est uniquement contrôlée par les caractéristiques du caractère lui-même. (zone de caractère) cependant, pour certains éléments, tels que les éléments de remplacement tels que les images, le contenu n'est évidemment pas du texte, et il n'existe donc pas de zone de caractère pour ceux-ci. Élément, la zone de contenu peut être considérée comme l'élément lui-même. 🎜

（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒 子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（line box），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containing box），由一行一行的“行框盒子”组成。

62. content 与替换元素的关系？

content属性生成的对象称为“匿名替换元素”。

（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了user select:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值无法获取。

63. margin:auto 的填充规则？

margin的'auto'可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发mar gin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

（1）如果一侧定值，一侧auto，则auto为剩余空间大小。

（2）如果两侧均是auto，则平分剩余空间。

64. overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度 高度限制的时候，剪裁的边界是border box的内边缘，而非padding box的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

代码篇

1. 下面代码中，p标签的背景色是什么？

<style>
     #parent p { background-color: red;  }
      div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;  
</style>
......
<div>
     <div>
         <p>xxxx</p>
     </div>
</div>

大家需要注意，权重是按优先级进行比较的，而不是相加规则。

答案：red。

2. 假设下面样式都作用于同一个节点元素span，判断下面哪个样式会生效？

body#god div.dad span.son {
    width: 200px;
}
body#god span#test {
    width: 250px;
}

本题考察css的样式优先级权重，大家需要记住：

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。 所以本题的分析思路是：

• 先比较高权重位，即第一个样式的高权重为 #god = 100
• 第二个样式的高权重为 #god + #text = 200
• 100
• 所以最终计算结果是取 width: 250px;
• 若两个样式的高权重数量一样的话，则需要比较下一个高权重！

答案：width: 250px;

3. 第二个子元素的高度是多少？

<div>
    <div></div>
    <div></div>
</div>
<style>
    .container{
        display: flex;
    }
    .container > div {
        width: 100px;
    }
</style>

Flex 布局会默认：

• 把所有子项变成水平排列。
• 默认不自动换行。
• 让子项与其内容等宽，并把所有子项的高度变为最高子项的高度。

答案：100px

手写篇

1. 如何从 html 元素继承 box-sizing

html { 
    box-sizing: border-box; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
}

2. 如何使用css来实现禁止移动端页面的足有滑动手势？

最简单的方法：

html { 
    touch-action: none; 
    touch-action: pan-y; 
}

还可以直接指定对应元素的宽度和overflow：

html { 
    width: 100vw; 
    overflow-x: hidden; 
}

3. 如何使用 CSS 画一个三角形

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

4. 如何实现两栏布局，右侧自适应？三栏布局中间自适应？

两栏布局

浮动实现

  <style>
    .box{
       overflow: hidden; 
    }
    .left {
       float: left;
       width: 200px;
       background-color: gray;
       height: 400px;
    }
    .right {
       margin-left: 210px;
       background-color: lightgray;
       height: 200px;
    }
</style>
<div>
    <div>左边</div>
    <div>右边</div>
</div>

flex实现

  <style>
    .box{
       display: flex;
    }
    .left {
       width: 100px;
       background-color: skyblue;
       height: 400px;
    }
    .right {
       flex: 1;
       background-color: pink;
       height: 200px;
    }
  </style>
  <div>
    <div>左边</div>
    <div>右边</div>
  </div>

三栏布局

  <style>
    .wrap {
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right,
    .middle {
        height: 500px;
    }
    .left {
        width: 200px;
        background: coral;
    }
    .right {
        width: 120px;
        background: lightblue;
    }
    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
  </style>
  <div>
    <div>左侧</div>
    <div>中间</div>
    <div>右侧</div>
  </div>

5. 单行文本如何实现两端对齐

方法一：添加一行

根据justify对最后一行无效，我们可以新增一行，使该行文本不是最后一行，实现如下：

<style>
//scss
  .item {
      height: 32px;
      line-height: 32px;
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          width: 100px;
          text-align: justify;
          vertical-align: top;
          &::after {
              display: inline-block;
              width: 100%;
              content: &#39;&#39;;
              height: 0;
          }
      }
      .value {
          padding-right: 10px;
      }
  }
</style>
  <div>
    <span>哈哈哈</span>：
    <span>哈哈哈</span>
  </div>

方法二： text-align-last

text-align-last，该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

   //scss
  .item {
      margin-bottom: 8px;
      .label {
          display: inline-block;
          height: 100%;
          min-width: 100px;
          text-align: justify;
          text-align-last: justify;
      }
      .value {
          padding-right: 10px;
      }
  }

6. 使用 CSS 实现一个无限循环动画

  <style>
   .anima {
      width: 800px;
      height: 600px;
      animation-name: likes; 
      animation-direction: alternate; 
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-duration: 1s; 
    }

  @keyframes likes {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(0.9);
    }
    50%{
        transform: scale(0.85);
    }
    75%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
  }
  </style>
  <image></image>

7. 如何实现单行、多行文本溢出隐藏？

单行文本溢出隐藏

<style>
   div {
      width: 100px;
      height: 100px;
      /* 溢出隐藏 */
      overflow: hidden;           
      /* 溢出用省略号显示 */
      text-overflow: ellipsis;   
      /* 规定段落中的文本不进行换行   */
      white-space: nowrap;  
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

多行文本溢出隐藏

<style>
   div {
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 作为弹性伸缩盒子模型显示 */
      display: -webkit-box;
      /* 显示的行数 */
      -webkit-line-clamp: 3;
      /* 设置伸缩盒子的子元素排列方式：从上到下垂直排列 */
      -webkit-box-orient: vertical;
   }
  </style>
  <div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  </div>

8. CSS 垂直居中有哪些实现方式？

我们在布局一个页面时，通常都会用到水平居中和垂直居中，处理水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;,就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题就是「垂直居中」，以下将介绍几种单纯利用CSS垂直居中的方式，只需要理解背后的原理就可以轻松应用。

下面为公共代码：

<style>
.box {
  width: 300px;
  height: 300px;
  background: #ddd;
}
.small {
  background: red;
}
</style>


    <div>
        <div>small</div>
    </div>

1. absolute + margin实现

方法一：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    width: 100px;
    height: 100px;
  }

方法二：

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100px;
    height: 100px;
  }

2. absolute + calc 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
  }

3. absolute + transform 实现

  .box {
    position: relative;
  }
  .small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100px;
    height: 100px;
  }

4. 转行内元素

  .box {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
  }
  .small {
    padding: 6px 10px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
  }

5. 使用flex

方法一：

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

方法二：

  .box {
    display: flex;
    justify-content: center;
  }
  .small {
    align-self: center;
  }

更多编程相关知识，请访问：编程视频！！