Syntaxe de base CSS, sélecteurs, attributs d'éléments communs, modèle de boîte, mise en page flexible

1. Qu'est-ce que CSS

• HTML décrit uniquement la structure du squelette et le contenu de la page. CSS peut être utilisé pour décrire le style de la page et embellir davantage la page.

• Feuilles de style en cascade (Feuilles de style en cascade)
  CSS peut effectuer un contrôle précis au niveau des pixels sur la disposition des positions des éléments dans les pages Web, obtenir l'effet d'embellir la page et peut séparer le style et la structure de la page.

• Plus précisément, il décrit les éléments de n'importe quelle page Web, tels que la taille/la position/la police/la couleur/l'arrière-plan/la bordure...
  L'introduction de CSS peut donner une belle apparence à une page. CSS n'est pas tant une technologie qu'un « art ».

---

2. Syntaxe CSS

1. Spécifications de la syntaxe de base CSS

Chaque instruction CSS contient deux parties : sélecteur + attributs appliqués

• Le sélecteur détermine pour qui modifier
• Décidez quoi modifier
• {}À l’intérieur se trouve une structure de paire clé-valeur, qui représente divers attributs en CSS.
  • Les attributs déclarés sont des paires clé-valeur . Utilisé ;pour distinguer les paires clé-valeur et utilisé :pour distinguer les clés et les valeurs.
  • Il est d'usage que chaque paire clé-valeur se trouve sur sa propre ligne, et il est d'usage d'ajouter un espace après les deux-points.
  • Chaque paire clé-valeur correspond à une propriété CSS
• CSS utilisé /* */comme commentaires (utilisez ctrl + / pour basculer rapidement), non pris en charge//

<style>
	p {
    
    
		/* 设置字体颜色 */
		color: red;
		/* 设置字体大小 */
		font-size: 30px;
	}
</style>

<p>hello</p>

p est le sélecteur, ici cela signifie sélectionner toutes les balises p de la page

Le code CSS peut être placé dans des fichiers HTML (généralement placés styledans des balises) et styleles balises peuvent être placées n'importe où dans le HTML.

---

2. Comment introduire CSS

2.1. Feuille de style interne

Écrivez-le dans la balise style et intégrez-le dans le code HTML.
Théoriquement, le style peut être placé n'importe où dans le code HTML, mais il est généralement placé dans la balise head.

Avantages : Cela permet de séparer le style et la structure des pages
Inconvénients : La séparation n'est pas assez poussée, surtout lorsqu'il y a beaucoup de contenu CSS.

Le code écrit précédemment utilise principalement cette méthode, qui n'est pas couramment utilisée
dans le développement réel.PS : Cette méthode d'écriture est toujours conservée dans la recherche Sogou.

---

2.2. Feuille de style en ligne/style en ligne

• Spécifiez le style d'une certaine balise via l'attribut style

• Il ne convient qu'à l'écriture de styles simples et ne prend effet que pour une certaine balise.Inconvénients
  : Vous ne pouvez pas écrire de styles trop complexes, qui apparaîtront brouillons.

• Ce type de style en ligne est un usage relativement particulier (généralement utilisé avec JS). Le style en ligne ne prend effet que sur l'élément courant.

  (Pas besoin d'écrire des sélecteurs, pas besoin d'écrire {}, écrivez simplement les propriétés et les valeurs CSS directement)

<p style="color: red;">test</p>
<p>test</p> <!-- 不会受影响 --> 

Cette méthode d’écriture a une priorité plus élevée et remplacera les autres styles.

la couleur rouge est remplacée :

<style>
	div {
    
    
		color: red;
	}
</style>

<div style="color:green">想要生活过的去, 头上总得带点绿</div>

---

2.3. Style externe

La méthode la plus couramment utilisée dans le développement réel

1. Extrayez le code CSS séparément et placez-le dans un .cssfichier
2. Puis dans le code html, introduisez le fichier CSS via la balise link

De cette façon, plusieurs HTML peuvent réutiliser le même style.Par
exemple, lors de la rédaction d'un site Web, le site Web peut contenir plusieurs pages et les styles de ces pages sont similaires.

Remarque : N'oubliez pas d'appeler le CSS dans la balise link , sinon il ne prendra pas effet.
Cette méthode d'écriture est similaire à la définition d'une méthode en Java. Non seulement il faut la définir, mais il faut aussi qu'elle soit appelée.

1. Créez style.css :

p {
    
    
    color : rgb(8, 147, 240);
}

2. Utilisez la balise link pour introduire le CSS :

<link rel="stylesheet" href="style.css"> <!-- 在 head 中 -->

Ce type de balise de lien est généralement placée dans la balise head du HTML . Cette balise peut exister en plusieurs exemplaires (différents css sont introduits via plusieurs liens)

Dans le même temps, les outils de développement nous rappelleront également dans quel CSS ce style a été introduit . 2 est le numéro de ligne.

• Avantages : style et structure sont complètement séparés
• Inconvénients : Affectée par le cache du navigateur, la modification peut ne pas prendre effet immédiatement.
• À propos de la mise en cache :
  • Il s’agit d’un moyen technique courant pour améliorer les performances des ordinateurs.
  • Les ressources dont dépendent les pages Web (images/CSS/JS, etc.) sont généralement obtenues à partir du serveur. Si le site Web est fréquemment visité, il n'est pas nécessaire d'obtenir à plusieurs reprises ces ressources externes depuis le serveur, et elles peuvent être stocké dans le cache (c'est-à-dire stocké localement) sur le disque), améliorant ainsi l'efficacité de l'accès
  • Vous pouvez forcer l'actualisation de la page via ctrl + F5 pour forcer le navigateur à réobtenir le fichier CSS.

Le style le plus couramment utilisé dans le travail est le style externe.Ce que nous étudions ici utilise principalement la forme d'une balise de style de style interne, car le style est relativement simple.

---

3. Style de code

• style compact
• Développer le style (recommandé)

Bien qu'il soit plus convivial pour les programmeurs, le fichier CSS global deviendra plus volumineux car le fichier CSS est transmis au navigateur via le réseau puis analysé par le navigateur. Si le fichier CSS devient plus gros, il deviendra plus grand. Il consomme de la bande passante
réseau , affectant ainsi l'efficacité.
Par conséquent, lorsque vous consultez d'autres sites Web via des outils de développement, leur CSS est généralement dans ce style compact. Pendant la phase de développement du code, nous utilisons en fait un style de saut de ligne lâche. En fait, via des outils
tiers automatiquement remplacer (outils de packaging front-end)

Cela n'est pas seulement vrai pour CSS, mais aussi pour JS, ce qui est encore plus insensé (JS supprimera non seulement l'indentation et les sauts de ligne, mais remplacera également les noms de variables longs par des noms courts comme abcd)

---

4. Étui stylé

HTML et CSS ne sont pas sensibles à la casse.Il est habituel d'utiliser des minuscules lors de l'écriture du Code ~~

Parce qu'ils utilisent tous des minuscules, il n'y a pas de « casse chameau » en CSS.
CSS utilise généralement la « casse de la colonne vertébrale » et l'utilise –pour séparer les mots.

La nomenclature Spine n'est pas courante dans le développement quotidien. La plupart des langages de programmation n'autorisent pas l'utilisation de -symboles dans les noms de variables (pour éviter toute confusion avec le signe/symbole moins),
mais CSS ne peut pas effectuer d'opérations ni exprimer de logique... c'est donc le cas. -tout à fait dans un espace vide

Spécification de l'espace :

• Espace après deux points
• Il y a aussi un espace entre le sélecteur et {

---

3. Sélecteur

Fonctions du sélecteur :

• Sélectionnez l'élément d'étiquette spécifié dans la page

Sélectionnez d'abord l'élément avant de pouvoir définir les attributs de l'élément.
Tout comme dans des jeux comme SC2 et War3, vous devez d'abord sélectionner l'unité, puis lui ordonner d'agir.

Manuel de référence des sélecteurs CSS

Manuel de référence des sélecteurs CSS

Types de sélecteurs :

• Le contenu suivant ne représente que les sélecteurs pris en charge dans le standard CSS2. Certains ajouts ont été apportés en CSS3, dont nous parlerons plus tard.

1. Sélecteur de base : composé d'un seul sélecteur

• sélecteur de balises
• sélecteur de classe
• sélecteur d'identifiant
• sélecteur de caractères génériques

2. Sélecteur composé : Utilisation complète de plusieurs sélecteurs de base.

• sélecteur de descendants
• sélecteur d'enfant
• Sélecteur d'union
• Sélecteur de pseudo-classe

Il existe de nombreux types de sélecteurs en CSS

---

1. Sélecteur de base

1.1. Sélecteur de balises

Caractéristiques:

• Peut sélectionner rapidement des balises du même type, mais ne peut pas sélectionner de manière différentielle

Prend effet pour tous les p

<style>
	div {
     
     
		color: red;
	}
</style>  

---

1.2. Sélecteur de classe

Caractéristiques:

• La différenciation représente différentes balises,
  permettant à plusieurs balises d'utiliser la même balise

Détails de la syntaxe :

• Les noms de classes . commencent par
• La balise ci-dessous utilise l'attribut class pour appeler
• Une classe peut être utilisée par plusieurs balises, et une balise peut également utiliser plusieurs classes ( plusieurs noms de classes doivent être séparés par des espaces , ce qui peut rendre le code réutilisable)
• S'il s'agit d'un nom de classe long, vous pouvez utiliser -split
• N'utilisez pas de nombres purs, de caractères chinois ou de noms de balises pour nommer les classes.

Grâce aux sélecteurs de classe, vous pouvez sélectionner tous les éléments souhaités à votre guise (en théorie, tant que vous disposez de ce sélecteur, cela suffit)

Exemple de code : Tout d'abord, vous devez créer un nom de classe dans le code CSS.
Dans l'élément html correspondant, référencez ce nom de classe via l'attribut class . À ce stade, les éléments portant ce nom de classe se verront appliquer les attributs CSS pertinents. .

<body>
    <style>
        /* . 开头的就是 CSS 中的类名 */
        .green {
     
     
            color: green;
            font-size: 20px;
        }
    </style>

    <!-- 使用 class属性引入的时候，不需要写 . -->
    <p class="green">hello C</p>
    <p class="green">hello Java</p>
    <p>hello C++</p>
    <p>Python</p>
</body>

Exemple de code : Utilisation de plusieurs noms de classe

<body>
    <style>
        .box {
     
     
        width: 200px;
        height: 150px;
        }
        .red {
     
     
        background-color: red;
        }
        .green {
     
     
        background-color: green;
        }
    </style>
    
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

Bien que les sélecteurs de classe puissent déjà tout faire, afin de faciliter l'écriture du code, de nombreux autres sélecteurs ont été introduits,
ce qui est similaire à un CPU et un GPU.

---

1.3. sélecteur d'identifiant

• Utilisez le début pour indiquer le sélecteur d'identifiant en CSS#
• Tout d'abord, définissez un attribut id pour l'élément sélectionné . La valeur du sélecteur id est la même que la valeur id d'un élément en HTML.
• L'ID d'élément HTML n'a pas besoin de contenir #
• L'identifiant est unique et ne peut pas être utilisé par plusieurs balises . Le sélecteur d'identifiant ne peut sélectionner qu'un seul élément, pas plusieurs (la plus grande différence avec le sélecteur de classe)

	<style>
        #cpp {
     
     
            color: red;
        }
    </style>

    <p>hello C</p>
    <p>hello Java</p>
    <p id="cpp">hello C++</p>
    <p>Python</p>

---

1.4. Sélecteur de caractères génériques

Utilisez *la définition de pour sélectionner toutes les balises de la page sans être appelées par la structure de la page.

* {
    
    
	color: black;
}

La plus grande utilisation est d'annuler le style par défaut du navigateur.Différents navigateurs ont différents styles par défaut.

Style par défaut du navigateur :

Chrome : la taille de police par défaut dans la balise p est de 14 px, avec des marges supérieure et inférieure de 16 px par défaut. Cela peut ne pas être le cas dans d'autres navigateurs.

Par conséquent, lors du développement front-end, nos pages ne doivent pas s'appuyer sur le style par défaut.

Méthodes d'écriture couramment utilisées :

* {
    
    
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

Résumé des sélecteurs de base :

	effet	Caractéristiques
sélecteur de balises	Peut sélectionner toutes les mêmes balises	Impossible de choisir différemment
sélecteur de classe	Possibilité de sélectionner une ou plusieurs balises	Choisissez selon vos besoins, le plus flexible et le plus couramment utilisé.
sélecteur d'identifiant	Peut sélectionner une étiquette	Le même identifiant ne peut apparaître qu'une seule fois dans un code HTML
sélecteur de caractères génériques	Sélectionnez toutes les balises	Utilisé dans des circonstances particulières

---

2. Sélecteur de composés

2.1. Sélecteur de descendants

Également appelé sélecteur d'inclusion, grâce à la combinaison de plusieurs sélecteurs, les éléments enfants/petits-enfants (éléments descendants) d'un élément peuvent être sélectionnés.

L'élément 1 est le parent et l'élément 2 est l'enfant. Seul l'élément 2 est sélectionné et l'élément 1 n'est pas affecté.

选择器1 选择器2 {样式声明}

1), il doit y avoir un espace au milieu

• S'il y a un espace ul.name : Recherchez un élément avec un nom de classe dans la balise ul. S'il
  n'y a pas d'espace ul.name : Recherchez un élément avec une classe ul et un nom.

2), les sélecteurs 1 et ⒉ peuvent tous deux être des sélecteurs de balises/sélecteurs de classe/sélecteurs d'identifiant

Exemple de code : changer la couleur de li dans ul sans affecter ol

	<style>
        ul li {
     
     
            color: red;
        }
    </style>

    <ul>
        <li>test</li> <!-- 针对 ul-->
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ol>

	<style>
        ul .name {
     
     
            color: red; /* 对 ul 的第一个 li */
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

Exemple de code : L'élément 2 ne doit pas nécessairement être un fils, il peut aussi être un petit-fils

	<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>

		ul li a {
    
    
            color: red;
        }
        或者
        ul a {
    
    
            color: red;
        }

Exemple de code : peut être n'importe quelle combinaison de sélecteurs de base (y compris les sélecteurs de classe, les sélecteurs d'identifiant)

<ol class="one">
	<li>ddd</li>
	<li>eee</li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
</ol>	

.one li a {
    
    
	color: green;
}

---

2.2. Sous-sélecteur

• Similaire au sélecteur de descendants, mais seules les balises enfants peuvent être sélectionnées , seuls les enfants biologiques sont sélectionnés et les éléments petits-fils ne sont pas sélectionnés.
• Séparez en utilisant le signe supérieur à,

选择器1>选择器2 { 样式声明 }

Exemple 1 : Pour le premier li dans ul, identique au sélecteur descendant

	<style>
        ul>.name {
     
     
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

Exemple 2 : Différences avec les sélecteurs descendants

Descendants : les deux liens 1 et 2 peuvent être sélectionnés

	<style>
        ul a {
     
     
            color: red;
        }
    </style>

    <div class="two">
		<a href="#">链接1</a>
		<p><a href="#">链接2</a></p>
	</div>

Sélecteur enfant : s'il est remplacé par ul>a, seul le lien 1 sera sélectionné, car le sélecteur enfant ne peut pas sélectionner les éléments petits-enfants.

	<style>
        ul>a {
    
    
            color: red;
        }
    </style>

pratique:

1. Changez le "chaton" dans le code suivant en rouge

<div class="cat">
	<ul>
		<li><a href="#">小猫</a></li>
		<li><a href="#">小猫</a></li>
		<li><a href="#">小猫</a></li>
	</ul>
</div>

CSS :

.cat ul li a {
    
    
	color: red;
}

2. Changez le "chaton" dans le code suivant en rouge

<div class="cat">
	<a href="#">小猫</a>
	<ul>
		<li><a href="#">小狗</a></li>
		<li><a href="#">小狗</a></li>
	</ul>
</div>

Utilisez les touches de raccourci Emmet pour générer le code html ci-dessus : .cat>a+ul>li*2>a

CSS :

.cat>a {
    
    
	color: red;
}

---

2.3. Sélecteur d'union

• Écrivez plusieurs sélecteurs en parallèle, séparés par des virgules .
• Dans le sélecteur d'union ici, vous pouvez écrire des sélecteurs simples ou des sélecteurs composés.
• Il est recommandé d'écrire le sélecteur d'union verticalement, chaque sélecteur occupant une ligne (le dernier sélecteur ne peut pas contenir de virgule)

元素1, 元素2 { 样式声明 }Indique que l'élément 1 et l'élément 2 sont sélectionnés en même temps

Exemple : sélectionnez ul et ol, mais n'incluez pas la balise a

	<style>
        ul>li,
        ol>li>a {
     
     
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ol>

---

2.4. Sélecteur de pseudo-classe

1), sélecteur de pseudo-classe de lien

• a:linkSélectionnez les liens non visités
• a:visitedSélectionnez un lien déjà visité
• a:hoverSélectionnez le lien en survolant le pointeur de la souris
• a:activeSélectionnez le lien actif (la souris est enfoncée mais ne surgit pas)

Démontrer le survol et l'activité :

	<style>
        div {
     
     
            color: red;
        }

        /* 鼠标悬停的时候 应用这个样式： */
        div:hover {
     
     
            color: gold;
        }

        /* 鼠标按下的时候，应用这个样式： */
        div:active {
     
     
            color: green;
            font-size: 20px;
        }
    </style>

    <div>这是一个 div</div>

Lien de démonstration et visité :

Comment restaurer un lien visité à un état non visité ?
Effacez simplement l'historique du navigateur. Ctrl + Maj + Suppr

		a:link {
    
    
            color: black;
            /* 去掉 a 标签的下划线 */
            text-decoration: none;
        } 
        a:visited {
    
    
            color: green;
        }
        a:hover {
    
    
            color: red;
        }
        a:active {
    
    
            color: blue;
        }

		<a href="#">小猫</a>

Précautions:

• Écrire selon l'ordre de LVHA, par exemple, mettre l'actif au premier plan rendra l'actif invalide. Règles de mémoire « verdissement »
• La balise a du navigateur a un style par défaut et, en général, le développement réel nécessite un style distinct.
• Dans le développement réel, nous créons principalement un style pour le lien, puis un style pour le survol. Les liens, visités et actifs ne sont pas beaucoup utilisés.

a {
    
    
	color: black;
} 
a:hover {
    
    
	color: red;
}

2), forcer le sélecteur de pseudo-classe

Sélectionnez l'élément du formulaire de saisie qui a le focus

<div class="three">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
</div>

.three>input:focus {
    
    
	color: red;
}

La police du formulaire sélectionné deviendra rouge.

Résumé des sélecteurs de composés :

Sélecteur	effet	Précautions
sélecteur de descendants	Sélectionnez les éléments descendants	Peut être un élément petit-enfant
sélecteur d'enfant	Sélectionnez les éléments enfants	Vous ne pouvez choisir que votre fils biologique, pas votre petit-fils.
Sélecteur d'union	Sélectionnez des éléments du même style	Meilleure réutilisation du code
Sélecteur de pseudo-classe de lien	Sélectionnez des liens avec différents statuts	Concentrez-vous sur la maîtrise de l'écriture d'un:hover.
:focuse sélecteur de pseudo-classe	Sélectionnez les éléments sélectionnés	Concentrez-vous sur la maîtrise de l'entrée : focus

---

4. Attributs des éléments communs

Documentation de référence :

Manuel de référence des sélecteurs CSS

Documentation MDN

1. famille de polices famille de polices
2. taille de police
3. poids de la police
4. Style de police Le texte de style police est incliné, utilisez principalement cette chose pour annuler l'inclinaison

---

1. Attributs de police

1.1. Définir la police :

• Utilisez des virgules pour séparer plusieurs polices ( recherchez les polices de gauche à droite , si aucune n'est trouvée, la police par défaut sera utilisée)
• Si le nom de la police comporte des espaces, utilisez des guillemets.
• Il est recommandé d'utiliser des polices courantes, sinon la compatibilité sera mauvaise

	<style>
        .one {
    
    
            font-family: "Microsoft YaHei";
        }

        .two {
    
    
            font-family: "宋体";
        }
    </style>

    <div class="one">
        it is well
    </div>
    <div class="two">
        it is well
    </div>

Lors de la définition de la police, vous devez vous assurer que la police que vous avez définie existe sur la machine de l'autre partie . Le système lui-même est livré avec certaines polices par défaut. Il peut également y avoir des polices tierces supplémentaires. Si vous souhaitez utiliser ces polices tierces, vous devez vous assurer qu'elles sont disponibles sur la machine de l'autre partie.

Vous pouvez également charger des fichiers de polices depuis le réseaulink via l'attribut en HTML

---

1.2. Taille :

• Différents navigateurs ont des tailles de police par défaut différentes. Il est préférable de donner une valeur claire (la valeur par défaut de Chrome est 16 px).
• Vous pouvez utiliser font-size pour la balise body
• Faites attention à l'unité px et n'oubliez pas
• Les balises de titre doivent être dimensionnées individuellement
• REMARQUE : cela définit en fait la hauteur des cases de caractères dans la police ; le glyphe du caractère réel peut être plus grand ou plus court que ces cases.

p {
    
    
	font-size: 20px;
}

---

1.3. Épaisseur :

• Vous pouvez utiliser des chiffres ou des mots pour indiquer l'épaisseur.
• 700 == gras, 400 n'est pas gras, == normal
• La plage de valeurs est de 100 -> 900

p {
    
    
	font-weight: bold;
	font-weight: 700;
}

---

1.4. Style du texte :

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

Je mets rarement un texte en italique, mais je change souvent le label em/ ien non italique.

---

2. Attributs du texte

2.1. Couleur du texte :

RVB :

• Notre affichage est composé de très nombreux « pixels ». Chaque pixel est considéré comme un point, et ce point peut refléter une couleur spécifique.

• Nous utilisons R (rouge), G (vert), B (bleu) pour représenter la couleur** (les trois couleurs primaires de la lumière et de la couleur**). Lorsque les trois couleurs sont assorties dans des proportions différentes, divers effets colorés peuvent être mélangés . .

• Dans l'ordinateur, les trois composants R, G et B sont représentés respectivement par un octet (8 bits, la plage de représentation est de 0 à 255 et la représentation hexadécimale est de 00 à FF).

• Plus la valeur est grande, plus la couleur du composant est foncée. 255, 255, 255 signifie blanc ; 0, 0, 0 signifie noir.

Définir la couleur du texte :

Passez la souris sur la couleur de vscode, un sélecteur de couleur apparaîtra et vous pourrez ajuster manuellement la couleur

• La couleur rouge;

• couleur : #ff0000 ;

  • La couleur est exprimée sous forme hexadécimale. Si deux paires sont identiques, elles peuvent être représentées par un #ff00ff =>#f0f

• couleur : RVB (255, 0, 0) ;

  • Vous pouvez utiliser le sélecteur de couleurs fourni avec les captures d'écran QQ pour afficher la valeur RVB de chaque couleur.

• rgba a un composant supplémentaire, alpha représente la transparence

---

2.2. Alignement du texte :

• Contrôler l'alignement horizontal du texte
• Non seulement vous pouvez contrôler l’alignement du texte, mais vous pouvez également contrôler que les images et autres éléments soient centrés ou à droite.
• text-align: [值];
  • center: alignement central
  • left: aligné à gauche
  • right: aligné à droite

	<style>
        .one {
    
    
            text-align: left;
        }

        .two {
    
    
            text-align: center;
        }

        .three {
    
    
            text-align: right;
        }
    </style>

    <div class="one">这是一段话</div>
    <div class="two">这是一段话</div>
    <div class="three">这是一段话</div>

---

2.3. Décoration du texte

text-decoration: [值];Valeurs couramment utilisées

• underlineSouligner. [Couramment utilisé]
• noneRien. Vous pouvez supprimer le soulignement de la balise a.
• overlineSurlignage [Pas couramment utilisé]
• line-throughBarré [pas couramment utilisé]

	<style>
        .text-decorate>a {
    
    
            text-decoration: none;
        }
        .text-decorate>.one {
    
    
            text-decoration: none;
        }
        .text-decorate>.two {
    
    
            text-decoration: underline;
        }
        .text-decorate>.three {
    
    
            text-decoration: overline;
        }
        .text-decorate>.four {
    
    
            text-decoration: line-through;
        }
    </style>

    <div class="text-decorate">
        <a href="#">链接去下划线</a>
        <p class="one">啥都没有</p>
        <p class="two">下划线</p>
        <p class="three">上划线</p>
        <p class="four">删除线</p>
    </div>

Dans la balise HTML, le soulignement et le barré peuvent être définis, ce qui peut également être réalisé via CSS. Le soulignement/barré lui-même est utilisé
comme style, implémenté sur la base de CSS, et constitue une
décoration de texte plus raisonnable. L'utilisation la plus courante n'est pas signifie ajouter un soulignement/barré à l'élément, mais supprimer le soulignement/barré existant , généralement pour la balise a.

Par exemple, le lien de navigation ici à la station B est souligné à l'aide de cet attribut. [Peut être observé avec F12]

---

2.4. Retrait du texte

• Contrôle l'indentation de la première ligne d'un paragraphe (les autres lignes ne sont pas affectées)
• text-indent: [值];
  • Les unités peuvent utiliser pxouem
  • emIndique les unités relatives. 1 em est relatif à la taille du texte de l'élément actuel.
    Les unités Em sont très utiles. Dans certains cas, la page permet aux utilisateurs de modifier la taille de la police.
  • L'indentation peut être négative, ce qui signifie une indentation vers la gauche (ce qui fera ressortir le texte)

	<style>
        .text-indent .one {
     
     
            /* text-indent: 20px; */
            text-indent: 2em;
        }

        .text-indent .two {
     
     
            text-indent: -2em;
        }
    </style>

    <div class="text-indent">
        <!-- div.one -->
        <div class="one">正向缩进</div>
        <div class="two">反向缩进</div>
    </div>

---

2,5, hauteur de ligne

La hauteur de ligne fait référence à la distance de base entre les lignes de contexte

L'affichage de texte en HTML implique ces lignes de base :

• Ligne supérieure
• ligne médiane
• Baseline (équivalent à l'avant-dernière ligne de la grille anglaise à quatre lignes)
• résultat net

Zone de contenu : la zone entourée par la ligne du bas et la ligne du haut, c'est-à-dire la zone de fond gris foncé dans l'image ci-dessous

En fait, la distance entre les lignes de base = la distance entre les lignes du haut = la distance entre les lignes du bas = la distance entre les lignes centrales

line-height: [值];

	<style>
        .two {
     
     
            line-height: 50px;
        }
    </style>

    <div class="one">上一行</div>
    <div class="two">中间行</div>
    <div class="three">下一行</div>

Note 1 : Hauteur de ligne = marge supérieure + marge inférieure + taille de police

Les marges supérieure et inférieure sont égales. La taille de la police ici est de 16 px, la hauteur de la ligne est de 40 px et les marges supérieure et inférieure sont respectivement de 12 px.

	<style>
        .line-height .one {
     
     
            line-height: 40px;
            font-size: 16px;
        }
    </style>
    
    <div class="line-height">
        <div>上一行</div>
        <div class="one">中间行</div>
        <div>下一行</div>
    </div>

Note 2 : La hauteur des lignes peut également être égale à la normale.

Cela dépend de l'implémentation du navigateur. La taille normale sur Chrome est de 21 px.

Note 3 : La hauteur de ligne et la hauteur d'élément peuvent être utilisées pour aligner le texte au centre.

• La hauteur de ligne est en fait la distance entre deux lignes de texte, la ligne du haut et la ligne du haut (en même temps, cette distance est aussi la distance de la ligne du bas à la ligne du bas, la distance de la ligne centrale à la ligne centrale, et la distance de la ligne de base à la ligne de base)
• Lors du réglage de la hauteur de ligne, cela affectera en fait à la fois les directions supérieure et inférieure. Les marges supérieure et inférieure sont égales.
• Étant donné que la hauteur de la ligne est égale de haut en bas, vous pouvez centrer le texte verticalement en fonction de la hauteur de la ligne.
  Si la hauteur de l'élément est de 150 px, il vous suffit de définir la hauteur de la ligne sur 150 px pour le texte à l'intérieur afin d'obtenir l'effet de centrage vertical. le texte.

	<style>
        div {
     
     
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color:coral;
            
            /* 居中对齐 */
            text-align: center;
            /* 垂直居中 */
            line-height: 150px;
        }
    </style>

    <div class="one">文本垂直居中</div>

---

3. Attributs d'arrière-plan

3.1. Couleur de fond

background-color: [指定颜色]

• vocabulaire anglais
• RVB
• #Nombres hexadécimaux
• rgba
• transparent L'arrière-plan est transparent (l'arrière-plan de l'élément parent est appliqué). La valeur par défaut est transparente et peut être modifiée en définissant la couleur.

	<style>
        body {
     
     
            background-color: grey; /* 针对 body */
        }
        .bgc .one {
     
     
            background-color: red;
        }
        .bgc .two {
     
     
            background-color: #0f0;
        }
        .bgc .three {
     
     
            /* 背景透明 */
            background-color: transparent; /* 引用父元素的 grey */
        }
    </style>
        <div class="bgc">
        <div class="one">红色背景</div>
        <div class="two">绿色背景</div>
        <div class="three">透明背景</div>
    </div>

---

3.2. Image d'arrière-plan

background-image: url(...);

Plus pratique que l'image pour contrôler la position (la position de l'image dans la boîte)

Avis:

1. Ne manquez pas l'URL

2. l'url peut être un chemin absolu ou un chemin relatif

3. Des guillemets peuvent être ajoutés ou non à l’url.

Remarque : Après avoir défini l'image de fond, la valeur par défaut est un effet carrelage, tout comme la pose de carrelage au sol. L'image est considérée comme un "carrelage au sol" et carrelée une à une.

<style>
       div {
     
     
            width: 600px;
            height: 400px;
            color: white;

           background-image: url(flower.jpg);

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

---

3.3. Carrelage d'arrière-plan

background-repeat: [平铺方式]

Valeurs importantes :

• repeat: carrelage
• no-repeat: pas de carrelage
• repeat-x: Tuile horizontalement
• `repeat-y``` : mosaïque verticale

La valeur par défaut est repeaten mosaïque.
La couleur d'arrière-plan et l'image d'arrière-plan peuvent exister en même temps. L'image d'arrière-plan est au-dessus de la couleur d'arrière-plan.

	<style>
       div {
     
     
            width: 600px;
            height: 400px;
            color: green;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

---

3.4. Position d'arrière-plan

background-position: x y;

Modifier la position de l'image

Les paramètres sont disponibles en trois versions :

1. Noms positionnels : (haut, gauche, droite, bas)
   • Si vous utilisez simplement px comme unité, ce n'est pas facile à réaliser. Pour obtenir l'effet de "centrage" de l'image d'arrière-plan, vous pouvez également la définir sur un pourcentage.
2. Unité précise : coordonnée ou pourcentage (avec le coin supérieur gauche comme origine)
3. Unités mixtes : contient à la fois des noms locatifs et des unités précises

À propos du système de coordonnées :

Dans les ordinateurs, le système de coordonnées plan rectangulaire (système de coordonnées cartésiennes) est souvent utilisé pour exprimer la position. Le système de coordonnées plan dans les ordinateurs est généralement un système de coordonnées gaucher (différent du système droitier couramment utilisé dans les mathématiques du secondaire, le l'axe y pointe vers le bas)

<style>
       div {
     
     
            width: 600px;
            height: 400px;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;
           /* background-position: 0 0; 左上角 */
            background-position: 100px, 100px; /* 往左往下 */

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

Remarque :
Si les deux valeurs du paramètre sont des noms directionnels, l'ordre n'a pas d'importance. (en haut à gauche et en haut à gauche sont équivalents)
Si un seul nom directionnel est spécifié, le second sera centré par défaut. (gauche signifie horizontalement). centré, top signifie centré verticalement.)
Si les paramètres sont des valeurs exactes, alors le premier doit être x et le second doit être y. (100 200 signifie que x vaut 100 et y vaut 200)
Si les paramètres sont des valeurs exactes, et Si une seule valeur est donnée, la valeur doit être la coordonnée x et l'autre centre vertical par défaut.
Si le paramètre est une unité mixte, la première valeur doit être la coordonnée x et la deuxième valeur doit être la coordonnée y (100 centre signifie que l'abscisse est 100,
centrée verticalement)

---

3.5. Taille de l'arrière-plan

ackground-size: 值1, 值2;

• Valeurs spécifiques : Par exemple, 40px 60px signifie que la largeur est de 40px et la hauteur est de 60px.
• Pourcentage : Défini en fonction de la taille de l'élément parent
• Mots spéciaux : longueur|pourcentage|couverture|contenir
  • cover: L'image d'arrière-plan s'adapte à la taille de l'élément, remplissant l'image d'arrière-plan à une taille suffisamment grande pour que l'image d'arrière-plan recouvre complètement la zone d'arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone d'ancrage d'arrière-plan.
  • contain : Une partie de la couleur d'arrière-plan peut s'échapper. Étirez simplement l'image à la taille de l'élément et terminez-la. Assurez-vous que l'image d'arrière-plan est toujours à l'intérieur de l'élément.

---

4. Rectangle arrondi

Les éléments en HTML sont rectangulaires par défaut. Comme les logos d’applications sur les téléphones mobiles, ils ont tous des coins arrondis.

En CSS, border-radius est utilisé pour donner à la bordure un effet arrondi
border-radius: length; - la longueur est le rayon du cercle inscrit. Plus la valeur est grande, plus la ligne est forte.

4.1. Rectangle avec un petit arc

	<style>
        div {
     
     
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;

            border-radius: 10px;
        }
    </style>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, repudiandae enim!</div>

---

4.2. Générer un cercle

Si vous souhaitez obtenir un cercle , vous pouvez également le définir via le même attribut. Tout d'abord, vous devez avoir un carré . Supposons que la largeur du carré soit de 200 px. À ce stade, définissez la valeur du rayon de bordure sur 100 px ( la moitié de la largeur)

En plus d'écrire directement les nombres, vous pouvez également écrire 50 %, ce qui a le même effet (50 % est calculé en fonction de la largeur).

	<style>
        div {
     
     
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            color: blue;    
            text-align: center;
            line-height: 200px;

			/* 正方形宽度的一半 */
            /* border-radius: 100px; */
            border-radius: 50%;
        }
    </style>

    <div>Lorem ipsum dolor</div>

---

4.3. Générer un rectangle arrondi

	<style>
        div {
     
     
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;
            text-align: center;
            line-height: 100px;

            border: 2px solid rgb(35, 12, 167);
            border-radius: 50px;
        }

    </style>

    <div>Lorem ipsum dolor</div>

---

4.4. Développer la méthode d'écriture

border-radius est une méthode d'écriture composée, qui peut en fait être définie séparément pour les quatre coins.

border-radius:2em;  

Équivalent à

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;  

border-radius: 10px 20px 30px 40px;  

Équivalent à (disposé dans le sens des aiguilles d'une montre)

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;  

---

5. Outils de débogage Chrome – Afficher les propriétés CSS

Signification de la page de balise :

• éléments Afficher la structure des balises
• console vue console
• source Afficher le code source + débogage du point d'arrêt
• réseauVoir le processus d'interaction front-end et back-end
• application Visualiser certaines extensions fournies par le navigateur (stockage local, etc.)
• Performance, Mémoire, Sécurité, Lighthouse ne sont pas utilisés pour le moment et ne seront pas approfondis.

L'onglet éléments utilise :

• ctrl + molette de défilement pour zoomer, ctrl + 0 pour restaurer la taille d'origine.
• Utilisez la flèche supérieure gauche pour sélectionner un élément
• Sur la droite, vous pouvez visualiser les propriétés de l'élément actuel, y compris les classes introduites.
• Sur le côté droit, vous pouvez modifier les attributs CSS de l'élément sélectionné. Par exemple, pour la couleur, vous pouvez cliquer sur l'icône de couleur pour faire apparaître le sélecteur de couleur et modifier la couleur. Par exemple, pour la taille de la police, vous pouvez utiliser l'option touches fléchées pour affiner la valeur.
• Les modifications ici n'affecteront pas le code et seront restaurées en actualisant
• Si le style CSS est mal écrit, une invite s'affichera également ici (point d'exclamation jaune).

---

6. Mode d'affichage des éléments

En CSS, il existe de nombreux modes d'affichage des balises HTML

Les points clés sont ces deux-là :

• éléments au niveau du bloc
• éléments en ligne

Éléments de niveau bloc : occupent une ligne, peuvent définir la largeur et la hauteur

div, h1-h6, p, ul, li, table…

Éléments en ligne : n'occupent pas de ligne exclusive et ne peuvent pas définir la largeur et la hauteur

span, a, em, i...(compris comme un texte, la taille finale de l'élément en ligne dépend du contenu interne~)

Éléments de bloc en ligne : n'occupent pas une seule ligne et peuvent définir la largeur et la hauteur

entrée, img

Modifier le mode d'affichage des éléments via l'affichage en CSS. Une utilisation courante consiste à transformer des éléments en ligne en éléments de niveau bloc.

	<style>
        a {
     
     
            width: 500px;
            height: 300px;
        }

    </style>

    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>

	<style>
        a {
     
     
            width: 500px;
            height: 300px;

            display: block; /* 改成块级元素 */
        }

    </style>

    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>

L'affichage est une option spéciale. noneLes éléments ne sont pas affichés (éléments masqués)
. Bien que les éléments ici soient toujours visibles dans les outils de développement, ils ne seront pas affichés sur l'interface.

---

7. Modèle de boîte

1.Composition

Chaque élément HTML équivaut à une "boîte" rectangulaire

Cela équivaut à construire une maison : les murs de la maison sont les frontières, la distance entre les maisons est la marge extérieure, la distance entre les meubles et le mur est la marge intérieure et les meubles sont le contenu.

Cette boîte se compose de ces pièces :

• frontière frontière
• contenu contenu
• Rembourrage _
• marge _

---

2. frontière

Exemple : avec bordure :

	<style>
		div {
     
     
            width: 200px;
            height: 100px;
            border: 2px black solid;
        }

    </style>

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>

Remarque : La définition d'une bordure agrandira l'élément d'origine.

Bien qu'elle puisse être étendue, cette opération d'expansion n'est en réalité pas facile à utiliser (elle peut facilement entraîner une modification de la taille de l'élément en définissant la bordure, ce qui affecte davantage la mise en page)

Par exemple, la largeur de la page est de 500 px et elle contient de nombreuses images. Il y a 5 images sur une ligne et chaque image mesure 100 px de large. Par conséquent, une bordure est ajoutée à l'image, ce qui peut donner 5 images
. ne pas être affiché sur une seule ligne.

Lors de l'achat d'une maison :
Surface du bâtiment = Entretien dans l'appartement + Entretien dans la pièce commune (local de l'ascenseur)
Surface dans l'appartement = Surface utilisée + Espace occupé par le mur.
La zone bleue est la "zone utilisée", et la zone verte est la "zone dans l'appartement".

Dans le développement réel, l'opération la plus couramment utilisée consiste à définir box-sizingl'attribut. Pour border-box, la bordure définie à ce moment compressera le contenu au lieu d'étendre l'élément.

div {
    
    
	width: 200px;
	height: 100px;
	border: 10px black solid;
	box-sizing: border-box;
}

---

Style de bordure:

• Épaisseur : largeur de la bordure
• Style : style bordure
• bordure pleine pleine, bordure pointillée en pointillés, bordure pointillée en pointillés
• Couleur : couleur de la bordure

div {
    
    
    width: 200px;
	height: 100px;
	border: 10px black dashed;
	box-sizing: border-box;
}

• Prend en charge les abréviations , aucun ordre requis. Bordure : 1px rouge uni ;
• Vous pouvez modifier n'importe quelle bordure dans quatre directions : bordure-haut/bas/gauche/droite

---

3. Rembourrage et marge

• distance entre la frontière et le contenu

• Le contenu par défaut est placé contre la bordure. Utilisez le remplissage pour contrôler cette distance.
  Vous pouvez ajouter des marges dans les quatre directions.

  • dessus de rembourrage
  • fond de rembourrage
  • rembourrage-gauche
  • rembourrage à droite

• Vous pouvez également modifier les bordures dans quatre directions

padding: 5px;

Marges :

• Contrôler la distance entre les cases
• Vous pouvez ajouter des marges dans les quatre directions
  • marge supérieure
  • marge inférieure
  • marge gauche
  • marge droite

	<style>
        div {
    
    
            width: 200px;
            height: 100px;
            border: 10px black dashed;
            box-sizing: border-box;
            padding: 5px;
        }

        .one {
    
    
            margin-bottom: 10px;
        }
        
    </style>

    <div class="one">这是一个元素</div>
    <div class="two">这是一个元素</div>

.one {
    
    
	margin-bottom: 10px;
}

.two {
    
    
	margin-top: 10px;
}

La marge "s'effondrera" dans le sens vertical. Lorsque deux éléments ont des marges définies, la marge réelle est la plus grande valeur des deux, plutôt que la somme . Il n'apparaîtra pas dans le sens horizontal... (Ajout direct...)
Il s'agit d'une situation particulière causée par des problèmes historiques.

---

Centrage horizontal des éléments au niveau du bloc :

En vous basant sur la marge, vous pouvez réaliser un centrage horizontal d'un élément (et non un centrage horizontal du texte).
Centrage horizontal du texte : text-align : center.
Centrage vertical du texte : line-height == height
element : Vous pouvez utiliser la marge (bloc -level elements) )
centrage vertical des éléments : la marge n'est pas très bonne (nous y reviendrons plus tard)

<style>
	.one {
     
     
            width: 500px;
            height: 200px;
            background-color: orange;
        }
        
        .two {
     
     
            width: 200px;
            height: 200px;
            background-color: green ;
        }
    </style>

    <div class="one">
        <div class="two">
            hello
        </div>
    </div>

Set pour deux :margin: 0 auto;

Définissez les marges horizontales sur automatique (adaptatif au navigateur) et vous obtiendrez un effet de centrage horizontal.

Écriture composée :

Le rembourrage dans plusieurs directions peut être fusionné. [Rappelez-vous les quatre situations, elles sont toutes courantes.]

• remplissage : 5 px ; signifie 5 px dans les quatre directions
• remplissage : 5 px 10 px ; signifie que le remplissage supérieur et inférieur est de 5 px et que le remplissage gauche et droit est de 10 px.
• remplissage : 5 px, 10 px, 20 px ; signifie que la marge supérieure est de 5 px, les remplissages gauche et droit sont de 10 px et le remplissage inférieur est de 20 px.
• remplissage : 5px 10px 20px 30px ; signifie 5px en haut, 10px à droite, 20px en bas, 30px à gauche (dans le sens des aiguilles d'une montre)

---

8. Disposition flexible

1、affichage:flex

Principalement pour organiser la position (disposition) des éléments sur la page

La plupart des propriétés introduites précédemment sont définies pour l'élément lui-même , mais il y a ici certains éléments qui affectent la relation entre les éléments
. Le modèle de boîte (marge) en fait partie, mais ce n'est pas suffisant.

La mise en page flexible renforce encore ce point. La
mise en page par défaut de la page Web est de haut en bas (les éléments au niveau du bloc occupent une ligne)
. La page Web réelle doit non seulement être de haut en bas, mais également de gauche à droite.

	<style>
        .parent {
     
     
            /* 让当前元素的 宽度 和它的父元素一样宽 */
            width: 100%;
            height: 200px;
            background-color: orange;
        }

        .one, .two, .three {
     
     
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

    <div class="parent">
        <div class="ont">test</div>
        <div class="two">test</div>
        <div class="three">test</div>
    </div>

Par défaut, les divs sont des éléments de niveau bloc et occupent une ligne . Afin de permettre à ces divs d'être disposés sur une ligne horizontale, vous pouvez utiliser une disposition flexible
pour définir un attribut pour l'élément parent .display: flex;

• Flex est l'abréviation de flexible box, qui signifie « boîte flexible ».
• Tout élément HTML peut être spécifié comme display:flex pour compléter une mise en page flexible.
• L'essence de la disposition flex est d'ajouter l'attribut display:flex à la boîte parent pour contrôler la position et la disposition des boîtes enfants.
• Remarque : Lorsque l'élément parent est défini sur display: flex, les éléments float, clear et vertical-align de l'élément enfant ne seront pas valides.

La méthode de mise en page par défaut est la mise en page "verticale". Si vous avez besoin d'une mise en page "horizontale", vous pouvez utiliser une mise en page flexible.

---

2. Disposition flexible

Grâce à flexla mise en page, vous pouvez ajuster la façon dont les sous-éléments sont disposés.

Par défaut, ces éléments sont regroupés dans le coin supérieur gauche

Disposition horizontale : justify-content(Définissez la disposition des sous-éléments sur l'axe principal), assurez-vous de déterminer dans quelle direction se trouve l'axe principal avant utilisation

• départ disposé à gauche
• fin Disposer à droite
• centre disposé au centre
• l'espace entre permet un espacement égal entre les éléments (calculé automatiquement par le navigateur)
• l'espace autour permet un espacement égal entre les éléments, et il y a également des espaces sur les côtés les plus à gauche et à droite.

Disposition verticale :align-items

• Remarque : align-items ne peut être implémenté que pour les éléments sur une seule ligne. S'il y a plusieurs lignes d'éléments, vous devez utiliser item-contents

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: end;
}

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-between;
}

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-around;
    align-items: end;
}

---

3. Implémentez une structure de page typique basée sur une mise en page flexible

Les trois opérations les plus courantes en flex layout :

• Régler sur un affichage de mise en page flexible : flex pour réaliser
• Configurez la disposition horizontale justifier-contenu pour y parvenir
• Définissez les éléments d'alignement vertical pour y parvenir (dans la mise en page flexible, il est généralement disposé ligne par ligne et n'implique pas plusieurs lignes).
  Sur la base du contenu ci-dessus, vous pouvez obtenir certains effets de mise en page courants :

Pour obtenir ce type de mise en page, non seulement une mise en page flexible peut
être utilisée, mais également d'autres méthodes de mise en œuvre, telles que la mise en page basée sur des tableaux, des flottants, des grilles... La
mise en page en grille est une chose relativement nouvelle, et certains sont légèrement plus anciens. Le navigateur ne le prend pas
encore en charge. En revanche, flex a une meilleure compatibilité.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于弹性布局，实现一个典型的页面结构</title>
</head>
<body>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .nav {
     
     
            width: 100%;
            height: 50px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        .container {
     
     
            width: 100%;
            height: 600px;
            background-color: white;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .left, .right {
     
     
            width: 20%;
            height: 100%;
            background-color:rgb(86, 143, 204);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .container .content {
     
     
            width: 60%;
            height: 100%;
            background-color: rgb(119, 187, 139);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .footer {
     
     
            width: 100%;
            height: 100px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
        }
    </style>
    
    <div class="nav">
        导航栏
    </div>

    <div class="container">
        <div class="left">
            左侧边栏
        </div>
        <div class="content">
            内容区域
        </div>
        <div class="right">
            右侧边栏
        </div>
    </div>
    
    <div class="footer">
        页脚
    </div>

</body>
</html>

---