Points de base
- La grille CSS est un puissant système de disposition qui permet la création de structures de grille dans CSS, pas dans HTML. La plupart des navigateurs modernes le soutiennent, à l'exception de IE11, qui prend en charge les versions plus anciennes.
- Cet article montre comment créer une disposition réactive de la grille CSS moderne, ajouter progressivement la grille CSS et fournir du code de secours pour les navigateurs plus agés. Cela comprend la technologie pour centrer des éléments, courir des projets et ajuster la disposition des petits équipements.
- La grille CSS fournit des utilitaires tels que
grid-columnetgrid-rowpour localiser les éléments de la grille, ainsi que des propriétés telles quejustify-items,align-itemsetalign-selfpour aligner et ajuster les éléments. Il permet également des grilles imbriquées, où les éléments enfants de la grille eux-mêmes peuvent être des conteneurs de grille. - Pour les petits appareils d'écran, vous pouvez facilement modifier la structure de disposition pour le linéariser avec la grille CSS, redéfinir la zone de la grille et utiliser les requêtes multimédias. Cela constitue une disposition plus pratique sur les écrans plus petits.
Cet article montrera comment créer une disposition réactive de la grille CSS moderne, montrera comment utiliser le code de secours pour les navigateurs plus anciens, comment ajouter une grille CSS étape par étape et comment reconstruire la disposition sur de petits appareils et utiliser le centr sirection d'alignement d'alignement éléments.
Dans les articles précédents, nous avons exploré quatre techniques différentes pour construire facilement les dispositions de grille réactives. Ce message a été écrit en 2014 - avant que la grille CSS ne soit disponible - donc dans ce tutoriel, nous utiliserons une structure HTML similaire mais avec une disposition de grille CSS moderne.
Dans ce tutoriel, nous utiliserons Float pour créer une démo avec une disposition de base, puis l'améliorer avec la grille CSS. Nous démontrerons de nombreux services publics utiles tels que les éléments centrés, couvrant des projets et changeant de disposition facilement sur de petits appareils en redéfinissant les zones de grille et en utilisant des requêtes multimédias. Vous pouvez trouver le code dans ce codePen: Codepen Link
Disposition de grille CSS moderne réactive
Avant de plonger dans la création d'une démonstration de grille réactive, introduisons d'abord la grille CSS.
CSS Grid est un puissant système bidimensionnel qui a été ajouté à la plupart des navigateurs modernes en 2017. Il change complètement la fa?on dont nous créons des dispositions HTML. La disposition de la grille nous permet de créer des structures de grille dans CSS, pas dans HTML.
En plus de IE11, la plupart des navigateurs modernes prennent en charge la grille CSS. Vous pouvez utiliser caniuse.com pour vérifier l'assistance.
La disposition de la grille a un conteneur parent dont la propriété display est définie sur grid ou inline-grid. Les éléments enfants du conteneur sont des articles de grille et ils sont implicitement situés en raison de l'algorithme de la grille puissant. Vous pouvez également appliquer différentes classes pour contr?ler le placement, la taille, la position et d'autres aspects du projet.
Commen?ons par une page HTML de base. Créez un fichier html et ajoutez ce qui suit:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
Nous utilisons la sémantique HTML pour définir les parties du titre, de la barre latérale, du corps et du pied de page d'une page. Dans la section principale, nous utilisons la balise <article> pour ajouter un ensemble d'éléments. <article> est une balise sémantique HTML5 qui peut être utilisée pour envelopper un contenu indépendant et autonome. Une seule page peut contenir n'importe quel nombre de balises <article>.
Il s'agit d'une capture d'écran de la page à ce stade:
Ensuite, ajoutons le style CSS de base. Ajoutez une balise <style> à la tête du document et ajoutez le style suivant:
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}
Il s'agit d'une petite page de démonstration, nous allons donc styliser les balises directement pour la lisibilité plut?t que d'appliquer le système de dénomination de classe.
Nous utilisons le flotteur pour positionner la barre latérale vers la gauche, positionnez le corps principal vers la droite et définissez la largeur de la barre latérale sur une largeur fixe 6.3rem . Ensuite, nous calculons et définissons la largeur restante de la partie du corps à l'aide de la fonction CSS calc(). La partie principale contient une bibliothèque de projets organisés en blocs verticaux.
La disposition n'est pas parfaite. Par exemple, la hauteur de la barre latérale est différente de la hauteur de la partie de contenu principale. Il existe différentes techniques CSS qui peuvent résoudre ces problèmes, mais la plupart sont des conseils ou des solutions de contournement. étant donné que cette mise en page est un secours pour la grille, il sera vu par des utilisateurs de moins en moins. Le repli est disponible et assez bon.
Les dernières versions de Chrome, Firefox, Edge, Opera et Safari prennent tous en charge la grille CSS, ce qui signifie que si vos visiteurs utilisent ces navigateurs, vous n'avez pas à vous soucier de fournir des replies. Vous devez également considérer le navigateur à feuilles persistantes. Les dernières versions de Chrome, Firefox, Edge et Safari sont des navigateurs à feuilles persistantes. Autrement dit, ils se mettront automatiquement et silencieusement à se mettre à jour sans inciter l'utilisateur. Pour vous assurer que votre mise en page fonctionne correctement dans chaque navigateur, vous pouvez commencer par un secours par défaut flottant, puis appliquer les dispositions de grille modernes en utilisant des techniques d'amélioration progressive. Les utilisateurs utilisant des navigateurs plus anciens n'obtiennent pas la même expérience, mais c'est assez bien.
Amélioration progressive: vous n'avez pas à tout couvrir
Lors de l'ajout d'une disposition de grille CSS sur une disposition de secours, vous n'avez pas vraiment à écraser toutes les balises ou à utiliser un style CSS complètement séparé:
- Dans les navigateurs qui ne prennent pas en charge la grille CSS, les propriétés de la grille que vous ajoutez seront simplement ignorées.
- Si vous utilisez des éléments Float pour disposer, n'oubliez pas que les éléments de la grille sont prioritaires sur Float. Autrement dit, si vous ajoutez un style
float: left|rightà un élément qui est également un élément de grille (enfant de l'élément parent avec un styledisplay: grid), le flotteur sera ignoré et la grille est prise. - Les règles
@supportspeuvent être utilisées pour vérifier la prise en charge des fonctionnalités spécifiques dans CSS. Cela nous permet de remplacer le style de secours si nécessaire, tandis que les navigateurs plus anciens ignorent le bloc@supports.
Maintenant, ajoutons la grille CSS à notre page. Tout d'abord, marquons <body> comme un récipient de grille et définissons les colonnes, les lignes et les régions de la grille:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
Nous utilisons la propriété display:grid pour marquer <body> comme conteneur de grille. Nous avons fixé un écart de grille de 0,1 VW. GAP vous permet de créer des créneaux entre les cellules de la grille au lieu d'utiliser des marges. Nous ajoutons également deux colonnes en utilisant grid-template-columns. La première colonne adopte une largeur fixe de 6,5 REM, et la deuxième colonne adopte une largeur résiduelle. fr est une unité fractionnée, et 1FR est égal à une partie de l'espace disponible.
Ensuite, nous utilisons grid-template-rows pour ajouter trois lignes. La première ligne utilise une hauteur fixe de 6REM, la troisième ligne utilise une hauteur fixe de 3REM et l'espace libre restant (1FR) est alloué à la deuxième ligne.
Nous utilisons ensuite grid-template-areas pour affecter les cellules virtuelles générées par l'intersection des colonnes et des lignes à la région. Nous devons maintenant utiliser grid-area pour définir réellement les zones spécifiées dans le modèle de zone:
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}
La plupart des codes de secours n'ont pas d'effets secondaires sur la grille CSS, à l'exception de la largeur de la partie du corps width: calc(100% - 7.2rem);, qui calcule la largeur restante de la partie du corps après avoir soustrait la largeur de la barre latérale plus n'importe quel espace de marge / remplissage.
Il s'agit d'une capture d'écran du résultat. Veuillez noter que la zone principale n'occupe pas toute largeur restante:
Pour résoudre ce problème, nous pouvons ajouter width: auto; lors de la prise en charge de la grille:
body {
/*...*/
display: grid;
grid-gap: 0.1vw;
grid-template-columns: 6.5rem 1fr;
grid-template-rows: 6rem 1fr 3rem;
grid-template-areas: "header header"
"sidebar content"
"footer footer";
}
Il s'agit d'une capture d'écran du résultat actuel:
Ajouter des maillages imbriqués
L'élément enfant de la grille lui-même peut être un récipient de grille. Définissons la partie principale en tant que conteneur de grille:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
Nous utilisons un espace de grille de 0,1 VW et utilisons la fonction repeat(auto-fill, minmax(12rem, 1fr)); pour définir les colonnes et les lignes. L'option auto-fill essaie de remplir l'espace libre avec autant de colonnes ou de lignes que possible, et crée une colonne ou une ligne implicite si nécessaire. Si vous souhaitez mettre des colonnes ou des lignes disponibles dans l'espace disponible, vous devez utiliser auto-fit. Lisez une bonne explication sur la différence entre auto-fill et auto-fit.
Il s'agit d'une capture d'écran du résultat:
Utilisez la grille grid-column, grid-row et span Mots-clés
CSS Grid fournit grid-column et grid-row, qui vous permettent de localiser les éléments de la grille dans la grille parent à l'aide de lignes de grille. Ils sont l'abréviation des propriétés suivantes:
-
grid-row-start: Spécifiez la position de départ de l'élément de grille dans la ligne de grille -
grid-row-end: Spécifiez la position finale de l'élément de grille dans la ligne de grille -
grid-column-start: Spécifiez la position de départ de l'élément de grille dans la colonne de la grille -
grid-column-end: Spécifiez la position finale de l'élément de grille dans la colonne de la grille
Vous pouvez également utiliser le mot-clé span pour spécifier le nombre de colonnes ou de lignes à s'étendre.
Faisons le deuxième élément enfant de la zone principale couvrent quatre colonnes et deux lignes et positionnons-la à partir de la deuxième colonne et de la première ligne (qui est également sa position par défaut):
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
}
Il s'agit d'une capture d'écran du résultat:
en utilisant l'utilitaire d'alignement de la grille
Nous voulons centrer le texte dans le titre, la barre latérale et le pied de page, et les nombres de l'élément <article>.
La grille CSS fournit six propriétés justify-items, align-items, justify-content, align-content, justify-self, align-self,
qui peuvent être utilisées pour aligner et ajuster les éléments de la grille . Ils font en fait partie du module d'alignement CSS Box. header
aside Ajoutez ce qui suit dans les sélecteurs article, footer,
body {
/*...*/
display: grid;
grid-gap: 0.1vw;
grid-template-columns: 6.5rem 1fr;
grid-template-rows: 6rem 1fr 3rem;
grid-template-areas: "header header"
"sidebar content"
"footer footer";
}: -
justify-items - Utilisé pour ajuster les éléments de la grille le long de l'axe de ligne ou de la direction horizontale.
align-itemsstartendAlignez les éléments de la grille le long de l'axe de la colonne ou de la direction verticale. Ils peuvent tous prendre des valeurscenter,stretch, et
Il s'agit d'une capture d'écran après l'élément centré: 
reconstruire la disposition de la grille dans de petits appareils
Notre disposition de démonstration est pratique pour les écrans moyens et grands, mais peut ne pas être le meilleur moyen de créer une page pour les petits appareils d'écran. Avec la grille CSS, nous pouvons facilement modifier cette structure de disposition pour la linéariser dans de petits appareils, en redéfinissant la zone de la grille et en utilisant des requêtes multimédias.
Voici une capture d'écran avant d'ajouter le code pour reconstruire la disposition sur un petit appareil:
Maintenant, ajoutez le code CSS suivant:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>CSS Grid Layout Example</h2>
</header>
<aside class="sidebar">
<p>Sidebar</p>
</aside>
<main>
<article>1</article>
<article>2</article>
<article>11</article>
</main>
<footer>
<p>Copyright 2018</p>
</footer>
</body>
</html>
Sur les appareils avec des largeurs inférieurs à 575 pixels, la disposition devient linéaire:
Notez que la largeur de la barre latérale ne remplit pas la largeur disponible. Ceci est causé par le code de secours, donc tout ce que nous devons faire est d'utiliser width: auto; remplacer width: 6.3rem; sur les navigateurs compatibles avec la grille
body {
background: #12458c;
margin: 0rem;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
header {
text-transform: uppercase;
padding-top: 1px;
padding-bottom: 1px;
color: #fff;
border-style: solid;
border-width: 2px;
}
aside {
color: #fff;
border-width:2px;
border-style: solid;
float: left;
width: 6.3rem;
}
footer {
color: #fff;
border-width:2px;
border-style: solid;
clear: both;
}
main {
float: right;
width: calc(100% - 7.2rem);
padding: 5px;
background: hsl(240, 100%, 50%);
}
main > article {
background: hsl(240, 100%, 50%);
background-image: url('https://source.unsplash.com/daily');
color: hsl(240, 0%, 100%);
border-width: 5px;
} Il s'agit d'une capture d'écran du résultat final:
Conclusion
Dans ce tutoriel, nous avons créé une disposition de démonstration réactive à l'aide de la grille CSS. Nous démontrons l'utilisation du code de secours pour les navigateurs plus agés, étape par étape en ajoutant la grille CSS, en reconstruisant la disposition dans de petits appareils et en utilisant des éléments de centrage d'attribut d'alignement.
FAQ sur les dispositions de grille CSS modernes faciles et réactives
Quelle est la différence entre la grille CSS et Flexbox?CSS Grid et Flexbox sont tous deux de puissants systèmes de disposition dans CSS. Bien qu'ils puissent être utilisés de manière interchangeable dans certains cas, ils ont chacun leurs propres avantages uniques. Flexbox est un modèle de mise en page unidimensionnel qui convient particulièrement pour attribuer des éléments le long des colonnes ou des lignes. La grille CSS, en revanche, est un système de disposition bidimensionnel qui est idéal pour organiser des éléments en lignes et colonnes en même temps. Il est parfait pour créer des dispositions Web complexes.
Comment rendre ma disposition de grille CSS réactive?
La grille CSS facilite la création de dispositions réactives sans requêtes multimédias. Vous pouvez utiliser des unités
, qui représentent une partie de l'espace disponible dans le conteneur de la grille. Par exemple, si vous voulez trois colonnes de Monospace, vous pouvez utiliser fr. La colonne redimensionnera automatiquement pour s'adapter à l'écran. grid-template-columns: 1fr 1fr 1fr
Oui, la grille CSS et Flexbox peuvent être utilisées ensemble pour les dispositions. Vous pouvez utiliser la grille CSS pour créer une disposition globale de page, puis utiliser Flexbox pour disposer des composants ou des pièces individuels dans une cellule de grille. Cette combinaison permet un degré élevé de flexibilité et de contr?le sur la disposition.
Comment aligner les éléments dans la grille CSS?
La grille CSS fournit plusieurs propriétés pour aligner les éléments, y compris justify-items, align-items, justify-self et align-self. Ces propriétés peuvent être utilisées pour aligner les éléments le long de l'axe des lignes (alignement) ou de l'axe de colonne (align). Par exemple, justify-items: center va centrer l'élément le long de l'axe de ligne.
Comment créer des lacunes entre les projets de grille?
Vous pouvez utiliser la propriété grid-gap pour créer des lacunes entre les éléments de la grille. Cette propriété est l'abréviation de grid-row-gap et grid-column-gap. Par exemple, grid-gap: 20px créera un espace 20px entre tous les éléments de la grille.
auto-fill et auto-fit fonctionnent-ils dans la grille CSS?
Les mots clés auto-fill et auto-fit sont utilisés avec les fonctions grid-template-columns dans les propriétés grid-template-rows et repeat(). auto-fill Utilisez autant d'éléments que possible pour remplir des lignes ou des colonnes, et créez des cellules vides en cas d'éléments insuffisants. auto-fit se comporte de la même manière, mais il effondre les cellules vides, ce qui fait que l'élément s'étire pour remplir la ligne ou la colonne.
Comment chevaucher les éléments dans la grille CSS?
Dans la grille CSS, vous pouvez chevaucher des éléments en pla?ant des éléments sur la même cellule de grille ou en les faisant couler plusieurs cellules. Vous pouvez utiliser l'attribut z-index pour contr?ler l'ordre d'empilement des éléments qui se chevauchent.
Puis-je utiliser la grille CSS dans tous mes navigateurs?
La grille CSS est soutenue par tous les navigateurs modernes tels que Chrome, Firefox, Safari et Edge. Cependant, Internet Explorer ne le prend pas en charge. Si vous devez prendre en charge Internet Explorer, vous devrez peut-être utiliser une disposition de secours.
Comment créer des grilles imbriquées dans la grille CSS?
Vous pouvez créer des maillages imbriqués en définissant l'élément de maillage lui-même en tant que conteneur de maillage. Appliquez simplement display: grid à votre projet de grille et définissez la disposition de la grille comme vous le feriez pour n'importe quel conteneur de grille.
Comment contr?ler la taille des pistes de grille dans la grille CSS?
Vous pouvez utiliser les propriétés grid-template-rows et grid-template-columns pour contr?ler la taille de la piste de la grille (lignes et colonnes). Vous pouvez spécifier des tailles à l'aide de diverses unités, telles que des pixels (PX), des pourcentages (%) ou des fractions (FR).
Veuillez noter que le contenu ci-dessus a considérablement réécrit et poli le texte original, s'effor?ant de rendre l'article plus lisse, plus facile à lire, et plus conforme au style d'écriture des articles en ligne modernes sans changer la signification originale. Le format d'image reste le même. Le lien Codepen n'est pas disponible en raison de l'incapacité d'accéder aux sites Web et aux fichiers externes. Veuillez le remplacer vous-même.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Qu'est-ce que le ?rendu CSS bloquant le rendu??
Jun 24, 2025 am 12:42 AM
CSS bloque le rendu de la page car les navigateurs affichent le CSS en ligne et le CSS externe comme des ressources clés par défaut, en particulier avec les feuilles de styles importées, les grandes quantités de CSS en ligne et les styles de requête multimédia non optimisés. 1. Extraire CSS critique et l'intégrez-la dans HTML; 2. Retard Chargement CSS non critique via JavaScript; 3. Utilisez des attributs multimédias pour optimiser le chargement tel que les styles d'impression; 4. Comprimer et fusionner CSS pour réduire les demandes. Il est recommandé d'utiliser des outils pour extraire les CS de clé, combiner le chargement asynchrone rel = "précharge" et utiliser le chargement retardé des médias raisonnablement pour éviter une division excessive et un contr?le de script complexe.
CSS externe vs interne: quelle est la meilleure approche?
Jun 20, 2025 am 12:45 AM
TheBestApproachForCSSDependSonTheproject'sspecificneeds.ForLargerProjects, externalcsisBetterDueTomaintainiabilityAndReUsability; ForsmallerProjectsorSingle-pageApplications, internecssigh
Mon CSS doit-il être en minuscules?
Jun 19, 2025 am 12:29 AM
NON, CSSDOOSNOTHAVETOBEINLOWLOWERCASE.CI, USING USINGERCASERASERISROMEND pour: 1) Cohérence et réadaptation, 2) évitant les technologies de perception liées à la pertinence, 3) Potentiel PerformanceBenefits, and4) Amélioration de la collaboration.
CSS Sensibilité aux cas: comprendre ce qui compte
Jun 20, 2025 am 12:09 AM
CSSismostlyCase-insensible, buturlsandfontfamilyNamesaSaSase-sensible.1) Propriéties andvaluesLikEcolor: Red; arenotcase-sensible.2) UrlSMustMatchTheServer'scase, par exemple, / images / Logo.png.3) FontFamilyNamesliNe'apensans's'mUstBeexact.
Qu'est-ce que l'autoprefixer et comment ?a marche?
Jul 02, 2025 am 01:15 AM
AutoPrefixer est un outil qui ajoute automatiquement les préfixes des fournisseurs aux attributs CSS en fonction de la portée du navigateur cible. 1. Il résout le problème de maintenir manuellement les préfixes avec des erreurs; 2. Travaillez le formulaire de plug-in PostCSS, analyse CSS, analysez les attributs qui doivent être préfixés et générer du code en fonction de la configuration; 3. Les étapes d'utilisation incluent l'installation de plug-ins, la définition de la liste de navigateurs et leur permettant dans le processus de construction; 4. Les notes ne comprennent pas manuellement les préfixes, le maintien des mises à jour de la configuration, les préfixes pas tous des attributs, et il est recommandé de les utiliser avec le préprocesseur.
Que sont les compteurs CSS?
Jun 19, 2025 am 12:34 AM
CSSCOUNTERSCANAUTOMAMATIQUE UNEUXESECTIONS ET LISTS.1) USECOUNTER-RESEDTOINITINALIALIALISE, COMPTENDREMENTTOINCREAD, andCounter () Orcounters () toDisplayValues.2) combinewithjavascriptfordynamiccontentoenSureAcurateupdates.
CSS: Quand l'affaire est importante (et quand ne pas)?
Jun 19, 2025 am 12:27 AM
Dans CSS, les noms de sélecteur et d'attribut sont sensibles à la casse, tandis que les valeurs, les couleurs nommées, les URL et les attributs personnalisés sont sensibles à la casse. 1. Les noms de sélecteur et d'attribut sont insensibles à la casse, tels que la couleur arrière et la couleur arrière-plan sont les mêmes. 2. La couleur hexadécimale de la valeur est sensible à la casse, mais la couleur nommée est sensible à la casse, comme le rouge et le rouge n'est pas valide. 3. Les URL sont sensibles à la casse et peuvent causer des problèmes de chargement de fichiers. 4. Les propriétés personnalisées (variables) sont sensibles à la caisse, et vous devez faire attention à la cohérence du cas lorsque vous les utilisez.
Quelle est la fonction conique-gradient ()?
Jul 01, 2025 am 01:16 AM
THECONCON-GRADIENT () FURMATINGEnSSSCREATSCICLULARD GRODIENTSTHATATATECOLORSTOPSAROUNDacentralpoint.1.IiSIDEALFORPIECHARTS, PROGRESSINDICATEURS, Colorweels, andDecorativeBackgrounds.2.itworksByDefiningColOrStopSatSpiecificangles, FactuallylyTartingfromadefinin
