Maison >interface Web >tutoriel CSS >Introduction détaillée à l'apprentissage des points de connaissances communs du front-end Web

Introduction détaillée à l'apprentissage des points de connaissances communs du front-end Web

高洛峰original: 2017-03-22 15:19:261509parcourir

1. Éléments courants au niveau du bloc Éléments en ligne

p - les éléments au niveau du bloc les plus couramment utilisés

dl - au niveau du bloc utilisé avec dt-dd Éléments

formulaire - formulaire interactif

h1 -h6- titre

hr - ligne de séparation horizontale

ol - liste ordonnée

p - paragraphe

ul - liste non ordonnée

fieldset - ensemble de champs de formulaire

colgroup-col - élément de regroupement de colonnes de formulaire

table-tr- td Table et cellule de ligne

texte pré-formaté

a - lien hypertexte (ancre)

br - saut de ligne

i - italique

em - accentuation

img - image

saisie - zone de saisie

étiquette - étiquette du formulaire

span - conteneur en ligne commun, définit le bloc dans le texte

fort - accent gras

sous - indice

sup - exposant

zone de texte - zone de saisie de texte multiligne

u - Souligner

sélectionner - Sélection du projet

2. Plusieurs conditions pour réaliser trois points de texte

débordement de texte L'attribut est uniquement : s'il faut afficher une marque de points de suspension lorsque le texte déborde. Il n'a pas d'autres définitions d'attributs de style. Pour obtenir l'effet de générer une ellipse en cas de débordement, vous devez définir :

1. 🎜>width: value; (px, %, les deux sont acceptables)

2. Forcer l'affichage du texte sur une seule ligne :

white-space: nowrap; > 3. Le contenu du débordement est masqué : overflow : caché ;

4. Le texte du débordement affiche des points de suspension : text-overflow : points de suspension ; Remarque : il doit s'agir d'une seule ligne de texte. pour régler le débordement de cet article ! ! !

IE6+; chrome1.0+; safari3.1+ (firefox, opera ne sont pas encore pris en charge)

3. Plusieurs conditions pour le centrage vertical

Définir un élément dans un Pour centrer verticalement le conteneur, vous devez modifier la valeur de l'attribut

display

par défaut en inline-block ;

et ajouter un élément frère (règle) (le style de l'élément frère [ruler] est défini sur vertical-align:middle;width:0;

height

:100%;display:inline-block;) . Trois conditions : 1 : Doit être ajouté au conteneur (élément parent)

text-align

:center;

2 : Doit être ajouté au courant Convertissez l'élément en un élément de bloc en ligne (display:inline-block;) et ajoutez vertical-align:middle;3 à l'élément actuel (sans retour chariot Ajoutez l'élément de même niveau). span après l'élément actuel (sans retour chariot) ;Et vertical-align:middle;width:0;height:100%;display:inline-block

Éléments de remplacement et éléments de non-remplacement

Éléments de remplacement et élément de non-remplacement

a) Éléments de remplacement : le navigateur détermine le contenu d'affichage spécifique de l'élément en fonction de ses balises et de ses attributs. Par exemple : le navigateur lira les informations sur l'image et les affichera en fonction de la valeur de l'attribut src de la balise , mais si vous affichez le code (x)html, vous ne pouvez pas voir le contenu réel de l'image ; le type de propriétés de la balise pour déterminer s'il faut afficher les zones de saisie, les boutons radio, etc. (x), , , <select> en HTML sont tous des éléments de remplacement. Ces éléments n’ont souvent pas de contenu réel, c’est-à-dire qu’ils sont vides. L'élément de remplacement génère une boîte dans son affichage, c'est pourquoi certains éléments en ligne (img, input) peuvent définir la largeur et la hauteur. b) Éléments non remplaçables (éléments non remplaçables) : (x) La plupart des éléments HTML sont des éléments non remplaçables, c'est-à-dire que leur contenu est directement affiché à l'utilisateur (comme un navigateur). 5. Qu'est-ce qu'une carte de sprite ? Quels sont les avantages ? Intégration d'images, intégrez de petites images d'arrière-plan uniques dans une grande image d'arrière-plan. Avantages de l'intégration d'images : 1) Réduisez le nombre de requêtes au serveur grâce à l'intégration d'images, améliorant ainsi la vitesse de chargement des pages. 2) Réduisez la taille des images en les intégrant. 6. Qu'est-ce que la feuille de style <a href="http://www.php.cn/code/5005.html" target="_blank">css en cascade </a> ? Comment est calculé l’algorithme de priorité ? a. L'ordre de priorité d'importance et de source de bas en haut est : 1) Style par défaut du navigateur 2) <a href="http://www.php.cn/wiki/164.html" target="_blank">classe</a>/ id. ....Le poids du sélecteur 3) Style Inline 4) Inline ou externe (ordre d'écriture) 5) !important est le plus élevé 7. La différence entre display:aucun et <a href="http://www.php.cn/wiki/929.html" target="_blank">visibilité</a>:caché Le premier : caché mais ne prend pas de place ; le second : caché mais prend de la place 8. <a href="http://www.php.cn/code/6440.html" target="_blank">Plusieurs façons d'effacer le flottant </a> hack1 : ajoutez la déclaration overflow:hidden à l'élément parent ; hack2 : ajoutez de la hauteur à l'élément parent hack3 : Ajoutez un p vide sous l'élément flottant et ajoutez une déclaration à l'élément : p{clear:both; height:0; overflow:hidden;> hack4 : Méthode flottante universelle claire p:after{content: ". ”;clear:both;display:block;height:0;overflow:hidden; 1) Lié au texte : famille de polices, taille de police, style de police, variante de police, poids de police, police, espacement des lettres, hauteur de ligne, alignement du texte, retrait du texte, texte -transform, word-spacing 2) Lié à la liste : list-style-image, list-style-position, list-style-type, list-style 3) Lié à la couleur : color 4) Transparence (les éléments enfants hériteront de l'opacité de l'élément ancêtre, mais ne peuvent pas être modifiés) Remarque : font-size hérite de la taille de l'élément parent, pas du rapport . line-height Lorsque l'élément parent est un pourcentage ou une valeur px, l'élément enfant est le même que l'élément parent. Lorsque l'élément parent est normal ou un nombre, la hauteur de ligne de l'élément enfant est la taille de la police de l'enfant. élément multiplié par le nombre. 10. Méthode de positionnement valeur de l'attribut de position : statique, relative, absolue, fixe<a href="http://www.php.cn/wiki/188.html" target="_blank"></a>1) statique statique est la valeur par défaut. L'élément est situé dans le flux de documents et s'affiche normalement haut, <a href="http://www.php.cn/wiki/904.html" target="_blank">bas</a>, <a href="http://www.php.cn/wiki/906.html" target="_blank">gauche</a> et <a href="http://www.php.cn/wiki/907.html" target="_blank">droite</a>. les attributs de l'élément sont ignorés. L'attribut <a href="http://www.php.cn/wiki/905.html" target="_blank">z-index</a> est toujours 0.<a href="http://www.php.cn/wiki/903.html" target="_blank"></a>2) relatif positionnement relatif, conserve la position et la taille occupées par l'élément dans le flux de documents, déterminés par left/ right/top /bottom Plusieurs propriétés déterminent la distance de mouvement relative, et la position d'origine est conservée 3) absolue Positionnement absolu, pour séparer l'objet du document flow, utilisez left Les attributs tels que /right/top/bottom sont positionnés de manière absolue par rapport à l'élément parent le plus proche qui a des paramètres de positionnement, sinon, il est basé sur l'objet body <a href="http://www.php.cn/code/6074.html" target="_blank"> ;4) fixe Fixe est similaire à absolu, mais il est relatif au coin supérieur gauche de la fenêtre et ne défilera pas avec le document. Mais s’il s’agit d’une page multi-frame, c’est par rapport au coin supérieur gauche du cadre, et non au coin supérieur gauche du navigateur. 11. Quelle est la différence entre lien et @import ? 1. La différence entre les ancêtres. Link appartient à la balise XHTML et @import est entièrement une méthode fournie par CSS. 2. En plus de charger du CSS, la balise de lien peut également faire bien d'autres choses, comme définir <a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a>, définir les attributs de connexion rel, etc. @import ne peut charger que du CSS3. La différence dans l’ordre de chargement. Lorsqu'une page est chargée (c'est-à-dire lorsqu'elle est visualisée par un spectateur), le CSS référencé par lien sera chargé en même temps, tandis que le CSS référencé par @import attendra que la page soit complètement téléchargée avant d'être chargée. Alors parfois, en parcourant la page où @import charge le CSS, il n'y aura pas de style (il scintille juste) 4. Différence de compatibilité. Puisque @import a été proposé par CSS2.1, les anciens navigateurs ne le supportent pas. @import ne peut être reconnu que par IE5 ou supérieur, mais la balise link n'a pas ce problème 5. La différence lors de l'utilisation de dom. pour contrôler le style. Lorsque vous utilisez JavaScript pour contrôler le dom afin de modifier le style, vous ne pouvez utiliser que la balise de lien, car @import ne peut pas être contrôlé par le dom 12 Quelles sont les valeurs des attributs de positionnement ? Est-ce que chacun en vaut la peine ? La fonction de chaque valeur d'attribut : statique : valeur par défaut. Un élément dont la position est définie sur static s'affiche normalement, toujours à la position donnée par le flux de documents (les éléments statiques ignorent les déclarations haut, bas, gauche ou droite). absolu : positionnement absolu par rapport à l'élément parent, s flotte hors du flux de mise en page, il n'occupe pas d'espace, c'est ce que nous appelons un calque, sa position est relative à l'élément parent positionné le plus proche Position, vous pouvez directement spécifier les attributs "left", "top", "right" et "bottom". Si le parent n'est pas positionné, le HTML (élément racine) sera utilisé. (Ordre d'empilement z-index : valeur) relatif : il s'agit d'un positionnement décalé par rapport à la position par défaut. Il peut être déplacé vers une position par rapport à sa position normale en définissant les valeurs gauche, haut, droite et. valeurs inférieures. (Mouvement par rapport à sa propre position de départ, [ne perturbera pas le flux de mise en page normal] fixe : positionnement absolu par rapport au navigateur, positionnement par rapport aux coordonnées spécifiées de la fenêtre du navigateur. La position de cet élément peut être spécifié par les attributs "left", "top", "right" et "bottom". L'élément restera dans cette position, que la fenêtre défile ou non 13. <.>html5<a href="http://www.php.cn/wiki/1118.html" target="_blank">Ajout de 15 nouvelles </a> balises<a href="http://www.php.cn/php/php-tp-append.html" target="_blank"></a>en-tête de navigation pied de page mainà côté de l'article section figure datalist vidéo audio fieldest légende étiquette légende<a href="http://www.php.cn/wiki/646.html" target="_blank"></a>14. 1. Qu'est-ce que BFC ? Comment le générer ? 1. Contexte de formatage au niveau du bloc 2. > margin chevauchements (placés dans deux BFC) <a href="http://www.php.cn/wiki/931.html" target="_blank">3. Élément racine, l'attribut </a>float n'est aucun, la position est absolue ou fixe, l'affichage est en ligne-bloc, table-cellule. , table-caption, flex, inline-flex, overflow ne sont pas visibles<a href="http://www.php.cn/wiki/919.html" target="_blank">15 La différence entre .px, em, rem, pt</a>1) px est en fait un pixel, utilisez px. Lors de la définition de la taille de la police, elle est relativement stable et précise Cependant, il y a un problème avec cette méthode lorsque l'utilisateur navigue sur la page Web que nous avons créée dans le navigateur, si le navigateur est zoomé, cela provoquera un zoom. us Lamise en page Web est cassée. Par conséquent, il a été proposé d'utiliser « em » pour définir la police de la page Web. <a href="http://www.php.cn/code/7955.html" target="_blank">2) em consiste à redimensionner la taille de la police en fonction de la ligne de base </a>em consiste à définir la taille de la police par rapport à son élément parent, il y aura donc un problème lors de la définition d'un élément, il y aura Vous aurez peut-être besoin de connaître la taille de son élément parent 3) rem est affiché par rapport à la taille de la police de l'élément racine rem est relatif à l'élément racine <html> ;, ce qui veut dire qu'il suffit de déterminer une valeur de référence dans l'élément racine 4) La taille de pt est égale à 1/72 de 1 pouce Livre : c'est un unité de mesure pour le texte Cette méthode de mesure est issue du milieu de la conception imprimée et est la plus adaptée aux médias, mais elle est également largement utilisée dans les affichages16 Quelles sont les méthodes pour réaliser un centrage vertical + horizontal ? 1. p{largeur:200px;hauteur:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">arrière-plan</a>:#f00;position:fixe;gauche:0;droite:0;haut:0;bas:0;marge :auto;}2. p{largeur:200px;hauteur:200px;arrière-plan:#f00;position:fixe;gauche:50%;haut:50%;marge:-100px 0 0 -100px; >17. Amélioration progressive et dégradation gracieuseAmélioration progressive : créez des pages pour les navigateurs de version basse pour garantir les fonctions les plus élémentaires, puis effectuez des effets et des interactions pour les navigateurs avancés. Attendez des améliorations et fonctions supplémentaires pour obtenir une meilleure expérience utilisateur. Dégradation gracieuse : créez des fonctions complètes depuis le début, puis rendez-les compatibles avec les navigateurs de versions inférieures18. Que sont les sélecteurs CSS ? 1) Sélecteur de caractère générique *2) Sélecteur de type/sélecteur d'élément a3) Entrée du sélecteur d'attribut[type="button"]4 ) Contient le sélecteur p .code a5) Sélecteur de sous-objet ul.test>li</.></a> 6) Sélecteur d'ID # 7) Sélecteur de classe . 8) Corps du sélecteur de groupe,ul,li 9) <a href="http://www.php.cn/code/6014.html" target="_blank">Pseudo-classe</a> et sélecteur de pseudo-objet p<a href="http://www.php.cn/wiki/970.html" target="_blank">:première lettre </a>a<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a> 10) Sélecteur adjacent li+li 19. La différence entre animation et transition Mêmes points : les deux C'est la valeur d'attribut de l'élément qui change avec le temps. . Différences : la transition doit déclencher un événement (événement de survol ou événement de clic, etc.) pour modifier ses propriétés CSS au fil du temps ; l'animation peut également être utilisée sans déclencher de changement explicite. la valeur de l'attribut CSS de l'élément au fil du temps pour obtenir un effet <a href="http://www.php.cn/code/9595.html" target="_blank">animation</a>. L'animation CSS3 nécessite des valeurs d'attribut d'animation claires. 20. Quels sont le modèle <a href="http://www.php.cn/code/6444.html" target="_blank"> de boîte standard </a> et le modèle de boîte bizarre. La différence entre les deux, comment implémenter le modèle de boîte étrange et le modèle de somme standard Modèle de boîte standard : contenu+bordure+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a> Modèle de boîte étrange : contenu L'un ajoute une bordure et un remplissage lors du calcul de la largeur de la boîte, l'autre n'en ajoute pas. Implémentation du modèle de boîte étrange : box-sizing : border-box Boîte standard model : box-sizing : content-box 21. Comment centrer un élément vers le haut, le bas, la gauche et la droite dans l'élément parent css : .box { display: flex; ;p class="box"> 22. Quels sont les formats couramment utilisés pour vidéo et audio ? Pour la vidéo : video /ogg video/mp4 video/webm pour audio : audio/ogg audio/mpeg Une brève explication du attributs et valeurs d'attribut du modèle de boîte flexible (Écrivez au moins 6 attributs) <a href="http://www.php.cn/code/6093.html" target="_blank"></a>display:flex; flex-<a href="http://www.php.cn/code/10723.html" target="_blank">direction</a> : justify-content : align-items :<a href="http://www.php.cn/wiki/873.html" target="_blank"></a>align-self : align-content : flex-wrap : 23. Présentez brièvement les dégradés et les chemins linéaires Utilisation du dégradé et du dégradé répété Gradient linéaire : gradient-linéaire() Dégradé radial : radial-gradient() Dégradé linéaire répétitif : répéter-linear-gradient() Dégradé radial répétitif : répéter-radial-gradient() 24. Présentez brièvement l'utilisation de l'animation l'animation se compose de deux parties : animation : nom de l'animation temps d'exécution de l'animation type d'animation temps de retard de l'animation numéro de répétition de l'animation direction de l'animation ; <a href="http://www.php.cn/wiki/1051.html" target="_blank"></a> 25. Principaux attributs et valeurs d'attributde CSS3D 1. Profondeur de champ : perspactive:number; Si l'objet que vous souhaitez voir est plus grand, définissez une valeur plus petite. , si vous souhaitez voir l'objet plus petit, définissez une valeur plus grande 2. Stage 3D : transform-style:preserve-3d; 3. 26. Les principaux attributs en 2D transform:translate() rotate() skew() scale() transform-origin: 27. . Présentez brièvement les attributs et les valeurs d'attribut de la transition animation transition : nom de l'attribut (vous pouvez utiliser tous) temps d'exécution de l'animation type d'animation temps de retard de l'animation<a href="http://www.php.cn/wiki/1483.html" target="_blank"> </a>28. . Le nouvel attribut background en css3<a href="http://www.php.cn/code/6021.html" target="_blank"></a>background-origin : background origin<a href="http://www.php.cn/code/865.html" target="_blank"></a>background-clip:Background cropping<.><a href="http://www.php.cn/code/868.html" target="_blank"></a>background-size</.> :La taille de l'image d'arrière-plan <a href="http://www.php.cn/code/872.html" target="_blank"></a><a href="http://www.php.cn/code/8294.html" target="_blank">Voici les trois valeursde background-size</a> longueur précise la taille de l'image d'arrière-plan. La première valeur est la largeur, la deuxième valeur est la hauteur. Pourcentage (%)Définissez la taille de l'image d'arrière-plan en pourcentage couvertureAgrandissez l'image d'arrière-plan pour qu'elle soit suffisamment grande pour que l'image d'arrière-plan couvre complètement la zone d'arrière-plan 29. Écrivez le noyau des cinq principaux navigateurs et leurs œuvres représentatives *Trident : IE, Maxthon, Tencent, Theworld, 360 Browser *Gecko : : L'œuvre représentative Mozilla Firefox est open source *Webkit : L'œuvre représentative Safari et Chrome sont un projet open source. *Presto : ouvrage représentatif d'Opera, Presto est un moteur de mise en page de navigateur développé par Opera Software. Il est également reconnu comme le moteur de rendu le plus rapide au monde. *Blink : un moteur de mise en page de navigateur développé par Google et Opera Software, sorti en avril 2013. 30. Notez plusieurs bugs et solutions courants dans IE6 (au moins 4) 1) L'image a une bordure Solution BUG : ajoutez border:0 ou border:0 à l'image ; none;2. Double direction flottante (double marge) Solution : display:inline3. Hauteur par défaut (IE6, IE7) Solution : Ajouter une déclaration à l'élément : font-size :0; Option 2 : Ajoutez une instruction à l'élément : overflow:hidden; 4. Les tailles par défaut des éléments de bouton sont différentes Option : Utilisez une balise pour simuler 31. Les d'IE. filtre Quels sont-ils ? <a href="http://www.php.cn/code/120.html" target="_blank">1. _ Filtre d'attribut souligné </a>2. 9 : reconnaissance de la version IE ; les autres navigateurs ne reconnaissent pas la syntaxe : sélecteur {attribut : valeur d'attribut 9 ;>3.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!</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">Déclaration：<div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox">Article précédent：<a class="dBlack" title="Comment utiliser le traitement de compatibilité bootstrap IE8" href="https://m.php.cn/fr/faq/358069.html">Comment utiliser le traitement de compatibilité bootstrap IE8</a>Article suivant：<a class="dBlack" title="Comment utiliser le traitement de compatibilité bootstrap IE8" href="https://m.php.cn/fr/faq/358073.html">Comment utiliser le traitement de compatibilité bootstrap IE8</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><a href="https://m.php.cn/fr/article.html" class="bBlack">Voir plus</a><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><a href="https://m.php.cn/fr/faq/841.html" title="Résumé de ce à quoi vous devez faire attention à propos de Border lors de l'écriture de CSS" class="aBlack">Résumé de ce à quoi vous devez faire attention à propos de Border lors de l'écriture de CSS</a><div class="clear"></div></li><li><a href="https://m.php.cn/fr/faq/961.html" title="Comment réaliser une sélection multi-styles et un changement de styles en temps réel_Échange d'expérience" class="aBlack">Comment réaliser une sélection multi-styles et un changement de styles en temps réel_Échange d'expérience</a><div class="clear"></div></li><li><a href="https://m.php.cn/fr/faq/1345.html" title="Analyse détaillée de l'utilisation du chapiteau" class="aBlack">Analyse détaillée de l'utilisation du chapiteau</a><div class="clear"></div></li><li><a href="https://m.php.cn/fr/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><a href="https://m.php.cn/fr/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt="">Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"> © php.cn All rights reserved </div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>