Questions d'entretien de base partielles HTML + CSS

1. Éléments en ligne et éléments de niveau bloc ? Qu'est-ce que img ? Comment convertir des éléments en ligne en éléments de niveau bloc ?

En ligne éléments : et tous les autres éléments sont sur une seule ligne, et la hauteur, la hauteur de la ligne, les marges extérieures et les marges intérieures ne peuvent pas être modifiées. La largeur de l'image texte ne peut pas être modifiée. Elle ne peut accueillir que du texte ou d'autres éléments en ligne. un élément de ligne
élément de niveau bloc. : commence toujours sur une nouvelle ligne, la hauteur, la hauteur de la ligne, les marges et le remplissage peuvent tous être contrôlés et peuvent accueillir des éléments en ligne et d'autres éléments
Convertir les éléments de ligne en bloc ; éléments de niveau : affichage : bloquer ;

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

2. Définir plusieurs éléments. Combien de façons d'effacer les flottants pour la même ligne ?

Définir plusieurs éléments sur la même ligne : float, inline-block
Comment effacer les flottants : Méthode 1 : Ajoutez de nouveaux éléments, Appliquez clear: Both;
Méthode 2 : Parent p définit overflow: Hidden
Méthode 3 : Utilisez :after et :before pour insérer deux blocs d'éléments à l'intérieur de l'élément pour obtenir l'effet d'effacement du flotteur ; .
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3. Un modèle de boîte bizarre ? Modèle de boîte flexible | Disposition de la boîte ?

Modèle de boîte en mode standard : largeur/hauteur totale de la boîte = largeur/hauteur+padding+border+margin
Sous le modèle de boîte en mode bizarre, la largeur totale et la hauteur de la boîte incluent le remplissage et la largeur de la bordure. La largeur/hauteur totale de la boîte = largeur/hauteur + marge = largeur/hauteur de la zone de contenu + remplissage + bordure + marge ;
box- Le dimensionnement a deux valeurs : l'une est. content-box et l’autre est border-box.
Lorsqu'il est défini sur box-sizing:content-box, l'analyse et le calcul en mode standard seront utilisés.
Lorsqu'il est défini sur box-sizing:border-box, l'analyse et le calcul en mode étrange seront utilisés ;

4. Décrivez brièvement quelques hacks CSS ?

(1) Écart dans l'image
Insérez une image dans p, et l'image s'agrandira au bas de p par 3px. hack1 : écrivez e388a4556c0f65e1904146cc1a846bee et a1f02c36ba31691bcfe87b2722de723b sur la même ligne. Hack2 : Ajouter un bloc d'affichage : à a1f02c36ba31691bcfe87b2722de723b ; espace d'image dans
dt li. Hack : Ajoutez display: block à a1f02c36ba31691bcfe87b2722de723b;
(2) Hauteur par défaut Dans les versions inférieures à IE6, certains éléments de bloc ont une hauteur par défaut (inférieure à 18 px)
Hack1 : Ajoutez : font-size au. element :0;
hack2 : Instruction : overflow : caché ;
La hauteur de la ligne du formulaire est incohérente
hack1 : Ajoutez une instruction au formulaire : float: left ; ; pointer
Hack : Si le pointeur de la souris d'un certain élément est unifié en une forme de main : curseur: pointer;
Lorsqu'un in li est converti en élément de bloc, définissez float sur a et une forme d'échelle apparaîtra dans IE
Hack1 : Ajouter display à un : inline-block ;
hack2 : ajouter float à li: left

5. 🎜>href (Référence hypertexte) Spécifie l'emplacement (référence hypertexte) d'une ressource réseau, définissant ainsi un lien ou une relation entre l'élément actuel ou le document actuel et l'ancre ou la ressource requise définie par l'attribut actuel. Utilisé sur des éléments tels que link et a. L'attribut

src (Source) intègre uniquement la ressource actuelle dans la position définie par l'élément de document actuel. C'est une partie essentielle de la page et constitue une introduction. Utilisé sur img, script, iframe et d'autres éléments.

title : C'est à la fois une balise html et un attribut html Lorsque le titre est utilisé comme attribut, il est utilisé pour fournir des informations descriptives supplémentaires pour l'élément
alt : alt est un attribut de la balise html. et l'attribut alt est utilisé pour spécifier le texte de remplacement. Il ne peut être utilisé que dans les éléments img, area et input (y compris les éléments d'applet). Il est utilisé pour fournir des descriptions de texte permettant aux utilisateurs de comprendre les informations sur l'image lorsque les images sont sur la page Web. ne peut pas être affiché normalement

6.transform ? animation? La différence ? animation-durée

Transformation : comme la largeur et la gauche, elle définit de nombreux styles statiques d'éléments pour implémenter des fonctions telles que la déformation, la rotation, la mise à l'échelle, le déplacement et la perspective. de fonctions, nous pouvons réaliser des effets statiques très sympas (non animés).

Animation : agit sur l'élément lui-même plutôt que sur l'attribut de style. Il appartient à la catégorie des animations par images clés. Il est lui-même utilisé pour remplacer du code javascript purement expressif pour implémenter l'animation. contrôlé via une image clé.

animation-duration : Spécifie le temps nécessaire pour terminer l'animation, en secondes ou en millisecondes.

7.énième-type | nième-enfant

103d2ed9afd06aadce2c4f0ddddcb4953bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689

li:nth-of-type(2) : représente le deuxième élément li sous ul
li:nth-child(2) : représente les deux L'élément li est le deuxième élément sous ul (introuvable).
Il est recommandé d'utiliser généralement le nième de type, ce qui est moins susceptible de causer des problèmes.

8. Quelle est la différence entre :before et ::before ?

Un seul deux-points (:) est utilisé pour les pseudo-classes CSS3 et un double deux-points (: :) est utilisé pour les pseudo-éléments CSS3. Pour les pseudo-éléments qui existaient avant CSS2, comme :before, le simple deux-points et le double deux-points ::before ont le même effet.

9. Comment centrer un p vers le haut, le bas, la gauche et la droite

Réponse : Il existe trois méthodes.

方法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   8eb75804e58375c7a2a4dd2914b2cc8394b3e26ee717c64999d7867364b1b4a3 方法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  25fdd61924ec43f68f6d130ac257deb194b3e26ee717c64999d7867364b1b4a3 方法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   2b9d554b5f57adf913ed7fb08b7f273594b3e26ee717c64999d7867364b1b4a3

10.css2.0 et css3.0

Réponse : CSS3 renforce les fonctions de CSS2, ajoute de nouveaux attributs et de nouvelles balises, et supprime Certaines balises redondantes réduisent la quantité de code en termes de mise en page. La mise en page auparavant compliquée peut désormais être résolue avec un seul attribut (des attributs tels que des colonnes). Plus d'effets ont été ajoutés (coins arrondis, animations, etc.), et des améliorations ont été apportées au modèle de boîte et aux modules de liste. Cependant, la compatibilité CSS3 n’est pas bonne et seules certaines versions avancées des navigateurs la prennent en charge.

11. Modèle de boîte flexible ? La différence entre flex|box ?

(1) Le but de l'introduction du modèle de disposition de boîte flexible est de fournir un moyen plus efficace. pour mettre en page un Les éléments du conteneur sont disposés, alignés et un espace blanc est alloué.

Le modèle de disposition flexbox peut fonctionner normalement même si la taille des éléments dans le conteneur est inconnue ou change dynamiquement. Dans ce modèle de mise en page, un conteneur ajuste la taille et l'ordre des éléments qu'il contient pour remplir au mieux tout l'espace disponible en fonction des besoins de la mise en page.

Lorsque la taille du conteneur change en raison de la taille de l'écran ou de la taille de la fenêtre, les éléments qu'il contient seront également ajustés dynamiquement. Par exemple, lorsque la taille du conteneur devient plus grande, les éléments qu'il contient seront étirés pour remplir l'espace vide excédentaire ; lorsque la taille du conteneur devient plus petite, les éléments seront rétrécis pour les empêcher de dépasser la portée du conteneur. La disposition Flexbox est indépendante de la direction.

Dans la méthode de mise en page traditionnelle, la mise en page en blocs dispose les blocs dans le sens vertical de haut en bas ;
La mise en page en ligne dispose les blocs dans le sens horizontal ; La disposition Flexbox n'a pas de telles restrictions de direction inhérentes et peut être librement manipulée par les développeurs.

(2) La différence entre flex et box: display: box est un ancien standard Si vous souhaitez prendre en compte la machine antique, ajoutez-la après que l'élément parent ait l'attribut display:box; Ajoutez l'attribut box-flex à ses éléments enfants. Vous pouvez laisser les éléments enfants occuper une certaine proportion d'espace en fonction de la largeur de l'élément parent. Flex est le dernier en date et n'est pas pris en charge par les anciennes machines de Dong Ji ;

Une fois l'élément parent défini display : flex, la largeur de l'élément enfant changera avec le changement de la largeur de l'élément parent, mais affichera : la boîte ne le sera pas. Le navigateur Android UC prend uniquement en charge la syntaxe display: box tandis que le navigateur iOS UC prend en charge les deux méthodes.

12.afficher tous les attributs ?

(1)width : définissez la largeur de la fenêtre de mise en page, qui est un entier positif, ou la chaîne 'device-width' ;

(2)initial-scale : définissez la valeur initiale La valeur de mise à l'échelle de la page est un nombre, les décimales étant autorisées.

(3)minimum-scale : La valeur de mise à l'échelle minimale autorisée par l'utilisateur, qui est un nombre et peut contenir des décimales.
(4)maximum-scale : La valeur de zoom maximale autorisée par l'utilisateur, qui est un nombre et peut contenir des décimales.
(5)hauteur : définit la hauteur de la fenêtre de mise en page. Cet attribut n'est pas important pour nous et est rarement utilisé.
(6)user-scalable : permet à l'utilisateur de zoomer, la valeur est '. non' ou 'oui' .
Android prend également en charge : target-densitydpi, qui représente le niveau de densité de l'appareil cible. Sa fonction est de déterminer combien de pixels physiques représente 1px en CSS
(7) target-densitydpi : La valeur peut être un. valeur numérique ou high-dpi, Une des chaînes medium-dpi, low-dpi, device-dpi

13. Comment comprendre la sémantique de la structure HTML ?

La sémantique dite de l'étiquette fait référence à la signification de l'étiquette. L'objectif principal de la sémantique est de permettre à chacun de comprendre intuitivement les utilisations et les fonctions des balises (balisage) et des attributs (attributs), et d'être convivial pour les moteurs de recherche. Avec une bonne structure et une bonne sémantique, le contenu de notre page Web sera naturellement facilement exploré. par les moteurs de recherche. Cette approche, qui respecte les règles de recherche des moteurs de recherche, peut économiser beaucoup d'efforts dans la promotion d'un site Web et est plus facile à maintenir car la structure est claire et très facile à lire. C’est également une étape importante dans l’optimisation des moteurs de recherche (SEO).

14. Sélecteurs de pseudo-classes et pseudo-éléments ? Existe-t-il des sélecteurs de pseudo-classes introduits dans c3 ? Quels sont les pseudo éléments dans c3 ?

Les pseudo-classes sont représentées par un deux-points, tandis que les pseudo-éléments sont représentés par deux deux-points.

Sélecteur de pseudo-classe :
Étant donné que l'état change dynamiquement, lorsqu'un élément atteint un état spécifique, il peut obtenir un style de pseudo-classe ; lorsque l'état change, il perdra ce style.

Sélecteur de pseudo-éléments :
n'est pas un sélecteur utilisé pour les éléments réels, mais un sélecteur utilisé pour les pseudo-éléments qui ont été définis en CSS

Introduit dans le sélecteur de pseudo-classe c3 :
:root() selector, root selector, correspond à l'élément racine du document où se trouve l'élément E. Dans un document HTML, l'élément racine est toujours 100db36a723c770d327fc0aef2ce13b1. Le sélecteur :root est équivalent à l'élément 100db36a723c770d327fc0aef2ce13b1 Le sélecteur

:not() est appelé sélecteur négatif, qui est exactement le même que le sélecteur :not dans jQuery. Il peut sélectionner tous les éléments sauf un certain élément.

:le sélecteurempty() signifie vide. Utilisé pour sélectionner des éléments sans aucun contenu ici signifie aucun contenu, même un espace.

 : Le sélecteur target() est utilisé pour spécifier un style pour un élément cible sur la page (l'identifiant de l'élément est utilisé comme lien hypertexte dans la page). Ce style n'est utilisé que lorsque l'utilisateur clique. sur le lien hypertexte dans la page. Et cela fonctionne après avoir sauté à l'élément cible. Le sélecteur

:first-child() signifie sélectionner l'élément E qui est le premier élément enfant de l'élément parent. Une compréhension simple consiste à sélectionner le premier élément enfant de l'élément. N'oubliez pas qu'il s'agit d'un élément enfant et non d'un élément descendant.

:nth-child() sélectionne un ou plusieurs éléments enfants spécifiques d'un élément.

:nth-last-child() part du dernier élément enfant d'un élément parent pour sélectionner un élément spécifique

:nth-of-type(n) sélecteur et : Le nième- Le sélecteur child(n) est très similaire, sauf qu'il ne compte que les éléments enfants d'un certain type spécifié dans l'élément parent.

:only-child signifie qu'un élément est le seul élément enfant de son élément parent.

:first-line Utilise des styles pour la première ligne de texte d'un élément.

:first-letter Utilisez des styles pour la première lettre ou le premier mot du texte d'un élément.

:before Insère du contenu avant un élément.

:after insère du contenu après un élément.

Pseudo-élément en c3 :
::first-line sélectionne la première ligne de l'élément, par exemple en changeant le style de la première ligne de texte de chaque paragraphe
::before et : :after Les deux sont principalement utilisés pour insérer du contenu devant ou derrière l'élément. Ces deux "contenus" sont couramment utilisés ensemble. Le plus courant que j'ai vu est le flottant clair
::selection est utilisé pour modifier l'effet par défaut. de sélection de texte lors de la navigation sur des pages Web

15.Quelles sont les nouvelles fonctionnalités de html5 et quels éléments ont été supprimés ? Comment gérer les problèmes de compatibilité des navigateurs avec les nouvelles balises HTML5 ? Comment différencier HTML et HTML5 ?

* HTML5 n'est plus un sous-ensemble de SGML, il s'agit principalement de l'ajout d'images, de localisation, de stockage, de multitâche et d'autres fonctions.
* Glisser-déposer API Balises de contenu sémantique améliorées (en-tête, navigation, pied de page, côté, article, section) API audio, vidéo (audio, vidéo) API Canvas Géolocalisation) API Stockage local hors ligne localStorage stockage à long terme des données, les données ne sont pas perdues après la fermeture du navigateur ;
les données de sessionStorage sont automatiquement supprimées après la fermeture du navigateur. Contrôles de formulaire, calendrier, date, heure, email, url, recherche Nouvelle technologie webworker, websocket, Géolocalisation
* Supprimé elements Éléments purement expressifs : basefont, big, center, font, s, strike, tt, u ;
Éléments qui ont un impact négatif sur la convivialité : frame, frameset, noframes ;
Prise en charge des nouvelles balises HTML5 :
* IE8/ ; IE7/IE6 prend en charge les balises générées par la méthode document.createElement. Vous pouvez utiliser cette fonctionnalité pour que ces navigateurs prennent en charge les nouvelles balises HTML5. Une fois que le navigateur a pris en charge les nouvelles balises, vous devez toujours ajouter le style par défaut de la balise :
. * Bien sûr, le meilleur moyen est d'utiliser directement un framework mature. Le plus utilisé est le framework html5shim6fc79538f41ba7309e847292db36ab30 🎜>html5shim.googlecode.com/svn/trunk/html5.js"2cacc6d41bbb37262a98f745aa00fbf0 7c09279552b2282a889d56d07d265ced`

* 上下margin重合问题
ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理)

18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式

1. Minimisez le nombre de requêtes HTTP
2. Réduisez le nombre de recherches DNS
3 Évitez les sauts
4. AJAX mis en cache
5. Préparation du chargement
7. Réduisez le nombre d'éléments DOM
8. Divisez le contenu de la page en fonction du nom de domaine
9. Réduisez le nombre d'iframes
Ne pas avoir d'erreurs 404
11. . Utilisez le réseau de distribution de contenu
12. Spécifiez Expires ou Cache-Control pour l'en-tête du fichier 13. Gzip compresse le contenu du fichier
14. Configurez ETag
15. Actualisez le tampon de sortie le plus tôt possible
16. . Utilisez GET pour compléter les requêtes AJAX
17. Mettez la feuille de style en haut
18. Évitez d'utiliser des expressions CSS (Expression)
19. Utilisez du JavaScript et du CSS externes
20. et CSS
21. Utilisez 2cdf5bf648cf2f33323966d7f58a7f3f au lieu de @ import
22. Évitez d'utiliser des filtres
23. Placez les scripts en bas de la page
24. >
Version 19.jquery ? Compatible 1.11 ?

La série Query 2.x a la même API que jQuery 1.x, mais ne prend plus en charge IE6, 7 et 8. Il est recommandé d'utiliser la version 1.x sauf si vous êtes sûr que les utilisateurs IE6, 7 et 8 n'accéderont plus au site Web.

jquery1.11 est la version 1.x, qui est compatible avec IE6, 7 et 8, il prend donc également en charge IE9.

Niveau de bloc 20 ? Au sein de l’industrie ? Éléments vides ?

Éléments en ligne : tous les autres éléments sont sur la même ligne. La hauteur, la hauteur de la ligne, les marges extérieures et les marges intérieures ne peuvent pas être modifiées et peuvent être modifiées. n'accepte que du texte. Ou d'autres éléments en ligne Éléments au niveau du bloc : commencez toujours sur une nouvelle ligne, la hauteur, la hauteur de la ligne, les marges et le remplissage peuvent être contrôlés, peut accueillir des éléments en ligne et d'autres éléments

vides : dans Éléments HTML, les éléments HTML sans contenu sont appelés éléments vides. Les éléments vides sont fermés dans la balise d'ouverture. 0c6dc11e160d3b678d68754cc175188a est un élément vide sans balise de fermeture.

Attribut 21.media ? écran? Tous? L'attribut max-width?min-width?

media spécifie l'appareil sur lequel le document lié sera affiché. L'attribut media est utilisé pour spécifier différents styles pour différents types de médias. Screen est l'écran par défaut de l'ordinateur, all est applicable à tous les appareils, max-width ne sera pas exécuté s'il dépasse la largeur maximale et min-width doit être supérieur à la largeur minimale avant l'exécution.

22. Quelle est la valeur de l'attribut name de la balise méta ? L'attribut

name est principalement utilisé pour décrire les pages Web, et la valeur de l'attribut correspondante est le contenu. Le contenu du contenu est principalement utilisé par les robots des moteurs de recherche pour trouver des informations et classer les informations. Le format de syntaxe de l'attribut name de la balise méta est : .

L'attribut name a principalement les paramètres suivants :

A. Description des mots-clés (keywords) : les mots-clés sont utilisés pour indiquer aux moteurs de recherche quels sont les mots-clés de votre page Web.
B, description (description du contenu du site Web) Description : la description est utilisée pour indiquer aux moteurs de recherche le contenu principal de votre site Web.
C, description des robots (guide du robot) : les robots sont utilisés pour indiquer aux robots de recherche quelles pages doivent être consultées. être indexé et quelles pages Aucun index n'est requis.
Les paramètres de contenu incluent all, none, index, noindex, follow, nofollow, et la valeur par défaut est all.
Exemple : ＜meta name="robots" content="none"＞D, author(author)


Combien de façons existe-t-il de couper des images sur des pages mobiles ?

Mise en page réactive, affichage de mise en page flexible : flex, utilisez js pour écrire et définir la proportion, définissez les pixels pour l'élément racine et utilisez rem comme unité.

24. Quelle est la différence entre px/em/rem ? Pourquoi la taille de la police est-elle généralement définie sur 62,5 % ?

La taille de la police par rapport au texte de l'objet actuel. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle sera relative à la taille de police par défaut du navigateur. 1. La valeur de em n'est pas fixe ;

2. em héritera de la taille de police de l'élément parent. Lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche.

rem est mis à l'échelle par rapport au navigateur. La valeur par défaut de 1rem est 16px. Dans une mise en page réactive, il est trop difficile de convertir un par un en rem, alors réinitialisez rem
body{font-size=62.5% } à ce moment-là 1rem = 10px ; , c'est 1.2rem .


25. Quelle est la différence entre sass et scss ? Comment sass est-il généralement compilé

Les extensions de fichier sont différentes. ".sass" comme extension. et SCSS utilise le suffixe ".scss" comme extension ; la syntaxe est écrite différemment avec des règles de syntaxe indentées strictes, sans accolades ({}) ni points-virgules (;). tandis que l'écriture syntaxique de SCSS est très similaire à notre écriture syntaxique CSS.

26. Que faire si le CSS est optimisé ?

Compresser et empaqueter, intégrer des images, éviter d'utiliser des Hacks, résoudre les problèmes de compatibilité, utiliser des abréviations pour assurer la maintenance future du CSS.

27. Comment compresser et fusionner des fichiers CSS ?

Utilisez gulp, installez gulp globalement sur la page d'accueil.
1. npm install --global gulp
2. Deuxièmement, installez gulp localement. npm install gulp --save-dev
3. Créez un fichier nommé gulpfile.js dans le répertoire racine du projet
var gulp = require('gulp');
gulp.task('default' , function () {
//Mettez votre code de tâche par défaut ici});
4. (La tâche par défaut nommée default sera exécutée. Si vous souhaitez exécuter une tâche spécifique séparément, veuillez saisir gulp 5a3616b73b29b6ef8523164b750a7aee 7d6b528363c38dfdf8956b7f1cce7869)
gulp
Fusionner et compresser JS, fichiers CSS
compresser Les fichiers JS, CSS doivent référencer les composants suivants :
gulp-minify-css : compresser css

28. Programmation modulaire ?

Programmation de composants : regroupez js css html pour fournir des méthodes et des effets ;
Modularisation : extrayez les mêmes fonctions et stockez-les au même endroit pour la programmation

29 . Afficher les images et le texte sur la même ligne ?

1 Ajoutez l'attribut "vertical-align:middle" à p en CSS.
2 Placez respectivement l'image et le texte dans des p différents, puis utilisez l'attribut "margin" pour les positionner afin qu'ils puissent être affichés sur la même ligne.
3 Définissez l'image comme image d'arrière-plan.

30. Désactiver le bouillonnement d'événement

event.stopPropagation()

31. >event.preventDefault()

32. Quelle est la séquence de configuration correcte pour le lien de survol actif visité dans la balise a

, visité, survolé, actif ? a un certain ordre a:link

a:visited

a:hover
a:active


33 Comment désactiver la page de saut href dans une balise Ou localiser le lien

e.preventDefault();href="javascript:void(0);

34. Clics à long terme sur les images sur les téléphones mobiles provoquera Comment gérer les images sélectionnées ?

onselect=function() {return false

}

Plusieurs méthodes d'attribut de balise vidéo

>

35. 🎜>

src : URL de l'affiche vidéo : couverture vidéo, image affichée en l'absence de lecture préchargement : préchargement de la lecture automatique : boucle de lecture automatique : commandes de lecture en boucle : largeur de la barre de contrôle du navigateur : largeur de la vidéo hauteur : hauteur de la vidéo

36. Combien de formats d'encodage vidéo courants existe-t-il ? Combien de formats vidéo existe-t-il ?

Formats vidéo : MPEG-1, MPEG-2 et MPEG4, AVI, Formats RM, ASF et WMV
Formats d'encodage vidéo : H.264, MPEG-4, MPEG-2, WMA-HD et VC-1

37.canvas sur l'étiquette Quel est le différence entre définir la largeur et la hauteur dans le style ?

La largeur et la hauteur de la balise de toile sont la largeur et la hauteur réelles de la toile, et la largeur et la hauteur du style sont basées sur cela . height est la hauteur et la largeur du canevas lorsqu'il est rendu dans le navigateur. Si la largeur et la hauteur du canevas ne sont pas spécifiées ou si les valeurs sont incorrectes, elles sont définies sur les valeurs par défaut. >

38.border box? -sizing?

Border-image : Bordure graphique

Box-sizing : La propriété vous permet de définir des éléments spécifiques qui correspondent à une certaine zone d'une manière spécifique .

Syntaxe : box-sizing : content-box | border-box
Content-box : le remplissage et la bordure ne sont pas inclus dans la largeur et la hauteur définies. La largeur réelle de l'objet est égale à la somme de la valeur de largeur définie, de la bordure et du remplissage, c'est-à-dire (Largeur de l'élément = largeur + bordure + remplissage) Cet attribut se comporte comme un modèle de boîte en mode standard
Bordure-. box : le rembourrage et la bordure sont inclus dans la largeur et la hauteur définies. La largeur réelle de l'objet est égale à la valeur de largeur définie. Même si la bordure et le remplissage sont définis, la largeur réelle de l'objet ne sera pas modifiée, c'est-à-dire (Largeur de l'élément = largeur). mode bizarre.

39. Amélioration progressive et dégradation gracieuse

Amélioration progressive : créez des pages pour les navigateurs de version basse afin de garantir les fonctions les plus basiques, puis améliorez les effets, les interactions et ajoutez des fonctions supplémentaires pour les navigateurs avancés afin d'obtenir une meilleure expérience utilisateur.
Dégradation gracieuse : créez des fonctionnalités complètes depuis le début, puis rendez-les compatibles avec les versions inférieures des navigateurs.
Différence : la dégradation gracieuse part du statu quo complexe et tente de réduire l'offre d'expérience utilisateur, tandis que l'amélioration progressive part d'une version très basique et fonctionnelle et l'étend continuellement pour s'adapter aux besoins de l'environnement futur.
La dégradation (décroissance fonctionnelle) signifie regarder en arrière ; l'amélioration progressive signifie regarder vers l'avant tout en gardant ses racines dans une zone de sécurité.
Le point de vue de la « dégradation gracieuse »
Le point de vue de la « dégradation gracieuse » estime que les sites Web doivent être conçus pour les navigateurs les plus avancés et les plus complets. Organisez les tests des navigateurs considérés comme « obsolètes » ou dont les fonctions manquent à la dernière étape du cycle de développement, et limitez les objets de test à la version précédente des navigateurs grand public (tels que IE, Mozilla, etc.).
Dans ce paradigme de conception, les anciens navigateurs sont considérés comme n'offrant qu'une expérience de navigation « médiocre, mais passable ». Vous pouvez effectuer quelques petits ajustements en fonction d'un navigateur spécifique. Mais comme elles ne sont pas au centre de notre attention, les autres différences seront ignorées, à l'exception de la correction de bugs plus importants.
Le point de vue « Amélioration progressive »
Le point de vue « Amélioration progressive » estime qu'il convient de prêter attention au contenu lui-même.
Le contenu est la raison pour laquelle nous construisons des sites Web. Certains sites Web l'affichent, certains le collectent, certains le recherchent, certains l'exploitent et certains sites Web incluent même tout ce qui précède, mais la même chose est qu'ils impliquent tous du contenu. Cela fait de « l’amélioration progressive » un paradigme de conception plus raisonnable. C'est pourquoi il a été immédiatement adopté par Yahoo! et utilisé pour construire sa stratégie « Graded Browser Support ».
Puis la question vient. Maintenant que le chef de produit voit que les effets de page Web d'IE6, 7 et 8 sont beaucoup moins arrondis et d'ombres (CSS3) que les navigateurs modernes, et qu'ils nécessitent une compatibilité (utiliser des arrière-plans d'images et abandonner CSS3), comment allez-vous le convaincre ?

40. Expliquez le modèle de boîte étrange, le modèle de boîte étrange et le modèle de boîte flexible de c3 dans les versions inférieures d'IE

IE lorsque la valeur de padding+border ? est inférieur à la largeur Ou hauteur :
Largeur du modèle de boîte = marge (gauche et droite) + largeur (la largeur inclut déjà les valeurs de padding et border)
Hauteur du modèle de boîte = marge (haut et bas) + hauteur (la hauteur inclut déjà la valeur de remplissage et de bordure))
Lorsque la valeur de remplissage+bordure est supérieure à la largeur ou à la hauteur :
Largeur du modèle de boîte = marge (gauche et droite) + remplissage (gauche et à droite) + bordure (gauche et droite)
Hauteur du modèle de boîte = marge (haut et bas) )+padding(haut et bas)+bordure (haut et bas)+19px (plus une hauteur de ligne par défaut de 19px ) Cela équivaut donc à comparer padding+border avec la largeur ou la hauteur, selon la valeur la plus grande.
Les DOCTYPE ci-dessus sont tous des types de documents standard. Quel que soit le mode utilisé pour définir complètement le DOCTYPE, le mode standard sera déclenché si le DOCTYPE est manquant, le mode bizarre (mode bizarreries) sera déclenché dans ie6, ie7 et ie8 CSS3box -sizing a deux valeurs, l'une est content-box et l'autre est border-box.
Lorsqu'il est défini sur box-sizing:content-box, le mode standard sera utilisé pour l'analyse et le calcul, qui est également le mode par défaut
Lorsqu'il est défini sur box-sizing:border-box, le mode bizarre sera ; être utilisé pour l'analyse et le calcul ;
Le modèle flexbox CSS3 introduit un nouveau modèle de boîte - le modèle flexbox, qui détermine comment une boîte est distribuée parmi d'autres boîtes et comment gérer l'espace disponible. Grâce à ce modèle, vous pouvez facilement créer une mise en page fluide qui s'adapte à la fenêtre du navigateur ou une mise en page flexible qui s'adapte à la taille de la police.

41.Attributs correspondants de l'animation

Écriture : animation : nom durée synchronisation-fonction délai itération-compte direction
Ce qui suit est une introduction aux attributs correspondants ;
animation-name spécifie le nom de l'image clé qui doit être lié au sélecteur.
animation-duration spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes.
animation-timing-function spécifie la courbe de vitesse de l'animation.
animation-delay spécifie le délai avant le début de l'animation.
animation-iteration-count spécifie le nombre de fois que l'animation doit être jouée.
animation-direction précise si l'animation doit être jouée à l'envers à tour de rôle.

42.transition?

La transition CSS permet aux valeurs d'attribut CSS d'effectuer une transition en douceur dans un certain intervalle de temps. Cet effet peut être déclenché par un clic de souris, un focus, un clic ou toute modification apportée à l'élément, et modifie en douceur la valeur de la propriété CSS avec un effet d'animation. Notez la différence entre la transformation, qui effectue des transformations 2D telles que le mouvement, la mise à l'échelle, et inversion. Venez, faites pivoter et étirez les éléments.

43.h5 de nouvelles fonctionnalités ?

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

44.canvas 如何绘制一个三角形|正方形  

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

<!DOCTYPE HTML5><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> <body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");//三角形         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();//正方形         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script></body></html>

45.所用bootstap版本？

3.0

46.css清除浮动的几种方式？

1、父级p定义 height
2、结尾处加空p标签 clear:both
3、父级p定义 伪类:after 和 zoom  
4、父级p定义 overflow:hidden  
5、父级p定义 overflow:auto  
6、父级p 也一起浮动
7、父级p定义 display:table

47.为什么要初始化CSS样式。

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

48.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩放,定位,倾斜增加了更多的CSS选择器  多背景 rgba 在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局 border-image

49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
6e4c09dfadbdc8532a2121b9890677a7@import "../fouc.css";531ac245ce3e4fe3d50054a55f265927
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在93f0f5c25f18dab9d176bd4f6de5d30e之间加入一个2cdf5bf648cf2f33323966d7f58a7f3f或者3f1c4e4b6b16bbbd69b2ee476dc4f83a元素就可以了。

51.a点击出现框，解决方法:

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }

相关教程推荐：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!