Wondershare EdrawMind
Galerie de cartes mentales Programme de formation de base HTML front-end CSS
- 7
Programme de formation de base HTML front-end CSS
Programme de formation de cours de base HTML front-end CSS, une page Web comporte trois parties, la structure est la structure globale de la page, où est le titre, où est le paragraphe, où est l'image, la structure est écrite en HTML, et la performance est le style externe de la page, tel que la police, la taille de la police, la couleur de la police, l'arrière-plan.
Modifié à 2022-11-08 10:53:34
Programme de formation de base HTML front-end CSS
- Recommandé pour vous
- Contour
Résumé des points de connaissances en matière de développement CSS, JS et HTML front-end
- 5
- 1
Programme de formation de base HTML front-end CSS
CSS
CSS est appelé feuilles de style en cascade et est utilisé pour styliser les éléments de la page. Couleur d’arrière-plan, couleur de police, taille de police. . .
CSS est responsable des performances en termes de structure, de présentation et de comportement.
emplacement écrit
1. Styles en ligne
Écrivez le style dans l'attribut style de la balise
Ce style ne fonctionnera que sur la balise actuelle et ne peut pas être réutilisé. Il n'est pas pratique pour une maintenance ultérieure et n'est pas recommandé.
2. Feuille de style interne
Écrivez la feuille de style dans la balise de style en tête
Utilisez des feuilles de style internes pour séparer davantage les performances et la structure. Vous pouvez définir des styles pour plusieurs éléments en même temps afin de faciliter la maintenance ultérieure.
3. Feuilles de style externes
Écrivez la feuille de style dans un fichier CSS externe, puis introduisez le fichier externe via la balise de lien
Écrivez les styles dans une feuille de style externe. Vous pouvez utiliser la même feuille de style sur différentes pages, en séparant complètement les performances et la structure, ce qui facilite la maintenance ultérieure.
grammaire de base
Sélecteur
Utilisez des sélecteurs pour sélectionner un groupe d'éléments sur la page, puis définissez des styles pour eux
sélecteur d'élément
Sélectionnez l'élément spécifié dans la page en fonction du nom de la balise
Syntaxe : nom de la balise { }
exemple:
div{}
p{}
h1{}
sélecteur d'identifiant
Sélectionnez un élément unique en fonction de la valeur de son attribut id
Syntaxe : #id {}
exemple:
#boîte1{}
#Bonjour{}
sélecteur de classe
Sélectionnez un groupe d'éléments en fonction de la valeur de l'attribut de classe de l'élément
Syntaxe : .class{}
exemple:
.Bonjour{}
.boîte{}
sélecteur de caractères génériques
Sélectionnez tous les éléments de la page
grammaire:*{}
Les performances des sélecteurs génériques sont relativement médiocres, essayez donc d'éviter de les utiliser.
Sélecteur d'union
Les éléments correspondant à plusieurs sélecteurs peuvent être sélectionnés en même temps
Syntaxe : sélecteur 1, sélecteur 2, sélecteur N{}
exemple:
div,p,#box,.bonjour{}
Sélecteur d'intersection
Les éléments qui répondent à plusieurs conditions peuvent être sélectionnés
Syntaxe : Sélecteur 1 Sélecteur 2 Sélecteur N{}
Exemple : p.bonjour{}
Sélecteur d'élément descendant
Sélectionne les éléments descendants spécifiés de l'élément spécifié
Syntaxe : Élément ancêtre Élément descendant {}
exemple:
durée div {}
divp{}
Sélecteur d'élément enfant
Sélectionnez l'élément enfant spécifié de l'élément spécifié
Syntaxe : élément parent > élément enfant {}
exemple:
div > étendue {}
div >p{}
bloc de déclaration
Le bloc de déclaration est en fait une déclaration CSS
déclaration
Chaque déclaration CSS est un style, qui est en fait une structure de paires nom-valeur.
Utilisation : lien entre nom et valeur
:Le côté gauche est le nom du style
:Le côté droit est la valeur du style
Chaque déclaration se termine par :
exemple
La couleur rouge;
taille de police : 20 px ;
relation entre les éléments
élément parent
Un élément qui contient directement des éléments enfants est appelé élément parent.
élément enfant
Les éléments directement contenus par un élément parent sont appelés éléments enfants.
Éléments ancêtres
Les éléments qui contiennent directement ou indirectement des éléments descendants sont appelés éléments ancêtres, et l'élément parent est également un élément ancêtre.
Éléments descendants
Les éléments qui sont directement ou indirectement contenus par les éléments ancêtres sont appelés éléments descendants, et les éléments enfants sont également des éléments descendants.
éléments de frère
Les éléments qui ont le même élément parent sont appelés frères et sœurs.
Éléments de bloc et éléments en ligne
élément de bloc
Un élément bloc occupe sa propre ligne sur la page, quel que soit son contenu.
Utilisez généralement des éléments de bloc pour mettre en page la page
Éléments de bloc communs
div
p
h1~h6
éléments en ligne
Les éléments en ligne n'occupent que leur propre taille et n'occuperont pas de ligne.
Les éléments en ligne sont également appelés éléments en ligne (inline)
Généralement, les éléments en ligne sont utilisés pour définir des effets sur le texte.
Commun en ligne
portée
un
img
Règles du forfait
Généralement, les éléments de bloc sont utilisés pour envelopper des éléments en ligne, mais les éléments en ligne ne sont pas utilisés pour envelopper des éléments de bloc.
L'élément a peut contenir n'importe quel élément sauf a lui-même
L'élément p ne peut contenir aucun élément de bloc
Pseudo-classes et pseudo-éléments
Les pseudo-classes et pseudo-éléments sont utilisés pour représenter un état spécial ou une position particulière de l'élément.
:lien
Représente un lien normal (lien non visité)
:a visité
Représente les liens visités
:flotter
Les liens vers lesquels la souris se déplace peuvent également être configurés pour survoler d'autres éléments.
:actif
Le lien sur lequel vous cliquez peut également être activé pour d'autres éléments.
:se concentrer
Indique l'état de l'élément recevant le focus, généralement utilisé dans les zones de texte.
::sélection
Indique que le contenu est sélectionné
Dans Firefox, utilisez plutôt ::-moz-selection
:première lettre
Représente le premier caractère
:Première ligne
Représente la première ligne de texte
:avant
Sélectionnez le devant de l'élément
Généralement, cette pseudo-classe est utilisée conjointement avec le contenu, grâce auquel le contenu peut être ajouté à l'emplacement spécifié.
:après
Sélectionnez le dernier bord de l'élément
Généralement, cette pseudo-classe est utilisée conjointement avec le contenu, grâce auquel le contenu peut être ajouté à l'emplacement spécifié.
sélecteur d'attribut
Sélectionnez l'élément spécifié en fonction de ses attributs
[Nom d'attribut]
Sélectionner des éléments avec des attributs spécifiés
[nom de l'attribut="valeur de l'attribut"]
Sélectionnez les éléments dont la valeur d'attribut est égale à la valeur spécifiée
[Nom de l'attribut^="Valeur de l'attribut"]
Sélectionnez les éléments dont la valeur d'attribut commence par le contenu spécifié
[Nom de l'attribut$="Valeur de l'attribut"]
Sélectionnez les éléments dont la valeur d'attribut se termine par le contenu spécifié
[Nom de l'attribut*="Valeur de l'attribut"]
Sélectionnez les éléments dont la valeur d'attribut contient le contenu spécifié
Sélecteur d'éléments frères et sœurs
Sélectionnez l'élément frère suivant
Précédent Suivant
Sélectionnez tous les éléments frères suivants
Précédent ~ Tous les suivants
Pseudo-classe pour les éléments enfants
:premier enfant
Rechercher le premier élément enfant de l'élément parent et trier parmi tous les éléments enfants
:dernier enfant
Rechercher le dernier élément enfant de l'élément parent et trier parmi tous les éléments enfants
:énième enfant
Recherchez l'élément enfant à la position spécifiée dans l'élément parent et triez-le parmi tous les éléments enfants.
exemple
p: nième enfant (3)
Vous pouvez utiliser pair pour rechercher des éléments enfants pairs
Vous pouvez utiliser odd pour trouver des éléments enfants impairs
:premier du type
Recherche le premier élément enfant du type spécifié
:dernier-du-type
Recherche le dernier élément enfant du type spécifié
:nième-de-type
Recherche l'élément enfant spécifié du type spécifié
nier la pseudo-classe
Éliminer les éléments qui répondent aux exigences d'un ensemble d'éléments
grammaire:
:pas(sélecteur)
exemple:
.abc:pas(div)
Héritage de styles
La définition des styles pour un élément ancêtre sera également appliquée à ses éléments descendants. Cette fonctionnalité est appelée héritage de style.
Grâce à l'héritage de style, certains styles peuvent être définis uniformément sur les éléments ancêtres, de sorte que tous les descendants se verront appliquer le même style.
Mais tous les styles ne seront pas hérités, tels que : liés à l'arrière-plan, aux bordures, au positionnement. Documents de référence spécifiques
priorité du sélecteur
Lorsque vous utilisez des sélecteurs pour styliser des éléments, en cas de conflit de styles, la priorité du sélecteur détermine le style utilisé.
priorité
styles en ligne
1000
sélecteur d'identifiant
100
Sélecteurs de classe et de pseudo-classe
dix
sélecteur d'élément
1
sélecteur de caractères génériques
0
Styles hérités
pas de priorité
En cas de conflit de styles, les priorités du sélecteur associées doivent être additionnées et calculées. Celle avec la priorité la plus élevée sera affichée en premier. Si les priorités sont les mêmes, le style le plus récent sera affiché.
Lors du calcul des priorités, la taille totale ne peut pas dépasser son ordre de grandeur maximum.
Vous pouvez ajouter un !important après le style. Si ce contenu est ajouté au style, le style aura la priorité la plus élevée et sera affiché avant tous les styles, y compris les styles en ligne. Cependant, cet attribut doit être utilisé avec prudence.
Performances du sélecteur
Lorsque le navigateur analyse un groupe de sélecteurs, il les analyse un par un de l'arrière vers l'avant.
Si le sélecteur est trop long, les performances d'analyse du navigateur seront médiocres, donc lors de l'écriture du sélecteur, plus il est court, mieux c'est.
*Les sélecteurs génériques ont des performances médiocres. Évitez d'utiliser des sélecteurs génériques.
unité
unité de longueur
px
Pixel, le pixel est la plus petite unité qui compose une image. Notre écran est composé de pixels un par un.
Un pixel fait référence à un pixel
Selon les écrans, la taille d'un pixel est différente. Plus l'écran est clair, plus les pixels sont petits.
%
Vous pouvez définir la valeur de style d'un élément sur une valeur en pourcentage, afin que le navigateur calcule la valeur correspondante en fonction de la valeur de l'élément parent.
Lorsque la valeur de l'élément parent change, la valeur de l'élément enfant changera ensemble selon une certaine proportion, qui est souvent utilisée dans les pages adaptatives.
em
em sera calculé par rapport à la taille de la police de l'élément actuel
1em = 1 taille de police
em est souvent utilisé pour définir certains styles liés au texte, car lorsque la taille du texte change, em changera en conséquence.
unité de couleur
mots de couleur
Utilisez directement des mots anglais pour représenter les couleurs
rouge vert bleu orange
Valeur RVB
La valeur dite RVB consiste à faire correspondre différentes couleurs grâce à différentes combinaisons des trois couleurs primaires que sont le rouge, le vert et le bleu.
grammaire:
RVB (rouge, vert, bleu)
Ces trois valeurs nécessitent une valeur comprise entre 0 et 255
0 signifie aucun
255 représente le maximum
RVB (50 200,30)
Vous pouvez également utiliser des pourcentages pour définir les valeurs RVB, qui nécessitent une valeur comprise entre 0 % et 100 %.
Le pourcentage est finalement converti en 0-255
0% équivaut à 0
100 % équivaut à 255
RVB (100%,0%,0%)
Valeur RVB hexadécimale
C'est également une manière d'exprimer les valeurs RVB. La différence est qu'il utilise des nombres hexadécimaux au lieu de décimaux.
grammaire:
#rougevertbleu
La couleur ici nécessite une valeur comprise entre 00 et ff
exemple:
#ff0000
Si la couleur se répète deux à deux, elle peut être abrégée.
Par exemple, #aabbcc peut s'écrire #abc
Par exemple, #bbffaa peut s'écrire #bfa
style de texte
Police de caractère
couleur
couleur de la police
taille de police
taille de police
La taille de police par défaut dans le navigateur est généralement de 16 px, et lorsque nous développons, elle est généralement unifiée à 12 px.
famille de polices
Définir la police du texte
le style de police
Définir l'italique
poids de la police
Définir la gras du texte
variante de police
en minuscule
Police de caractère
attribut d'abréviation de texte
Tous les styles liés aux polices peuvent être définis en même temps
grammaire:
police : [lettres italiques grasses] taille [/hauteur de la ligne] police
Gras, italique, petites et grandes lettres, l'ordre n'a pas d'importance, vous pouvez l'écrire ou non, sinon, utilisez la valeur par défaut
La taille du texte et la police doivent être écrites, et la taille doit être l'avant-dernière et la police doit être la dernière
Après la taille, vous pouvez définir la hauteur de la ligne, qui peut être écrite ou non. Dans le cas contraire, la valeur par défaut sera utilisée.
style de texte
hauteur de la ligne
hauteur de rangée
Par défaut, le texte est centré verticalement sur le centre haut de la ligne.
La hauteur de la ligne peut être modifiée via line-height
Espacement des lignes = hauteur de ligne - taille de la police
transformation de texte
Définir la casse du texte
décoration de texte
Définir la décoration du texte
aligner le texte
Définir l'alignement du texte
retrait du texte
Définir le retrait de la première ligne
Cela nécessite une unité de longueur. Si c'est une valeur positive, la première ligne se déplacera vers la droite. Si c'est une valeur négative, elle se déplacera vers la gauche.
l'espacement des lettres
espacement des caractères
espacement des mots
espacement des mots
arrière-plan
Couleur de l'arrière plan
Couleur de l'arrière plan
image de fond
Image d'arrière-plan
Une adresse url est obligatoire en paramètre
Exemple : background-image:url (chemin d'accès à l'image)
Répétition du fond
Définir le mode de répétition de l’image d’arrière-plan
Valeurs facultatives :
répéter
Par défaut, l'image d'arrière-plan sera affichée en mosaïque
Répétez dans les deux sens le long des axes x et y
pas de répétition
L'image d'arrière-plan ne se répète pas
répéter-x
L'image d'arrière-plan se répète horizontalement
répéter
L'image d'arrière-plan se répète verticalement
position d'arrière-plan
Définir la position de l'image d'arrière-plan
Première méthode de réglage
Vous pouvez directement définir la position de l'image grâce à plusieurs mots-clés de position
haut
gauche
droite
bas
centre
Vous pouvez définir l'image d'arrière-plan sur n'importe quelle position de l'élément en combinant les mots-clés ci-dessus par paires.
Si une seule valeur est spécifiée, la deuxième valeur est par défaut au centre
Deuxième méthode de réglage
Vous pouvez directement spécifier deux valeurs pour définir le décalage de l'image d'arrière-plan.
exemple:
position d'arrière-plan : décalage de l'axe x décalage de l'axe y ;
Décalage de l'axe X, utilisé pour spécifier la position horizontale de l'image
Si vous spécifiez une valeur positive, l'image se déplace vers la droite
Si vous spécifiez une valeur négative, l'image se déplace vers la gauche
Décalage de l'axe Y, utilisé pour spécifier la position verticale de l'image
Si vous spécifiez une valeur positive, l'image se déplace vers le bas
Si vous spécifiez une valeur négative, l'image se déplace vers le haut
pièce jointe d'arrière-plan
Utilisé pour définir si l'arrière-plan défile avec la page
Valeur facultative
faire défiler
Par défaut, l'image de fond défilera avec la page
fixé
L'image d'arrière-plan ne défile pas avec la page et sera fixée à la position spécifiée sur la page.
Si vous définissez l'arrière-plan de cette propriété, l'arrière-plan sera toujours positionné par rapport à la fenêtre du navigateur.
Généralement, cet arrière-plan sera défini sur le corps
arrière-plan
Attribut abrégé pour l'arrière-plan
Vous pouvez l'utiliser pour définir tous les styles liés à l'arrière-plan
Il n'y a aucune exigence de commande ou de quantité pour cet attribut abrégé. La valeur par défaut est utilisée pour les attributs qui ne sont pas écrits.
opacité
Utilisé pour définir l'opacité de l'arrière-plan
Valeur facultative
0-1
0 signifie complètement transparent
1 signifie complètement opaque
0,5 translucide
Les navigateurs IE8 et versions antérieures ne prennent pas en charge ce style. Vous pouvez utiliser des filtres à la place.
filtre:alpha(opacité=valeur)
La valeur ici nécessite une valeur comprise entre 0 et 100
0 équivaut à une transparence totale
100 complètement opaque
HTML
La structure de la page Web
Une page Web se compose de trois parties
structure
La structure est la structure globale de la page, où est le titre, où est le paragraphe, où est l'image
La structure est écrite en HTML
Performance
Les performances correspondent au style externe de la page, tel que la police, la taille de la police, la couleur de la police et l'arrière-plan. . .
Utilisez CSS pour styliser les éléments de votre page
Comportement
Interaction entre la page et l'utilisateur
Utiliser JavaScript pour définir le comportement de la page
Une page Web bien conçue nécessite la séparation de la structure, de la présentation et du comportement.
En développement, nous sommes toujours confrontés à un problème, qui est le couplage entre les programmes. La séparation des trois consiste à comprendre le couplage.
HTML, langage de balisage hypertexte
Responsable de la structure de la page et de la définition des différents composants de la page
Le HTML est écrit sous forme de texte brut et utilise des balises HTML pour identifier différentes parties de la page.
Étiquette
apparaissent par paires
étiquette à fermeture automatique
Les attributs
Vous pouvez définir l'effet de l'étiquette via les attributs
Les attributs doivent être définis dans la balise d'ouverture ou dans la balise de fermeture
Les propriétés sont en réalité un ensemble de paires nom-valeur.
exemple:
Structure de base d'une page HTML
Déclaration documentaire
La version HTML utilisée pour identifier la page actuelle
Cette instruction est utilisée pour indiquer au navigateur que la page actuelle est écrite en utilisant la norme HTML5.
Balises communes
La balise racine de la page Web
Il n'y a qu'une seule balise racine dans une page
Tout le contenu de la page Web doit être écrit dans la balise html
En-tête de la page Web
Le contenu de cette balise ne sera pas affiché directement sur la page Web
Cette balise est utilisée pour aider le navigateur à analyser la page
sous-étiquette
Utilisé pour définir le titre de la page Web
Par défaut, il sera affiché dans la barre de titre du navigateur
Lorsqu’un moteur de recherche récupère une page Web, il récupère principalement le contenu du titre, ce qui affectera le classement de la page dans le moteur de recherche.
Utilisé pour définir les métadonnées des pages Web, telles que le jeu de caractères utilisé par les pages Web
Définir des mots-clés pour les pages Web
Définir la description de la page Web
Redirection demandée
Le corps de la page Web
Toutes les parties visibles de la page Web doivent être écrites dans le corps
~
balise de titre
Il existe six niveaux de titres en HTML
Parmi les titres à six niveaux, h1 est le plus important et h6 est le moins important. Seuls h1~h3 sont utilisés dans les pages générales.
L'importance de h1 vient juste après le titre. Le navigateur recherchera également principalement le contenu de h1 pour déterminer le contenu principal de la page.
Généralement, un seul h1 peut être écrit sur une page.
balises de paragraphe
balise de nouvelle ligne
étiquette de ligne horizontale
iframe
Peut introduire d'autres pages externes dans une page
Les attributs
src
L'adresse de la page externe, vous pouvez utiliser des chemins relatifs
largeur et hauteur
Vous pouvez définir la largeur et la hauteur du cadre
nom
Un cadre en ligne peut recevoir un nom
Cette valeur d'attribut peut être définie sur la valeur de l'attribut cible du lien hypertexte
De cette façon, lorsque vous cliquez sur le lien hypertexte, la page s'ouvrira dans le cadre en ligne correspondant.
Le contenu des frames en ligne ne sera pas récupéré par les moteurs de recherche, essayez donc de ne pas utiliser de frames en ligne pendant le développement.
Lien hypertexte
Peut faire passer la page actuelle à d'autres pages
<a>Texte du lien</a>
Les attributs
href
Pointe vers l'adresse cible du saut de lien, qui peut être un chemin relatif
Il peut également s'agir de la valeur de l'attribut #id, de sorte que lorsque vous cliquez sur le lien hypertexte, il accède à l'emplacement spécifié sur la page actuelle.
Vous pouvez utiliser mailto : pour créer un lien hypertexte qui envoie un email
cible
Spécifiez la fenêtre dans laquelle le lien doit être ouvert
Valeur facultative
_soi
Valeur par défaut, le lien sera ouvert par défaut dans la fenêtre courante
_vide
Ouvre le lien dans une nouvelle fenêtre
La valeur de l'attribut name d'un frame en ligne
Ouvre le lien dans l'iframe spécifié
Commentaire
grammaire
Le contenu des commentaires ne sera pas affiché sur la page, mais sera affiché dans le code source. Nous pouvons utiliser les commentaires pour expliquer le code de la page Web.
Vous pouvez également masquer certains contenus que vous ne souhaitez pas afficher sur la page via les commentaires.
entité
Certains symboles spéciaux ne peuvent pas être utilisés directement dans les pages HTML et des entités doivent être utilisées pour remplacer ces symboles spéciaux.
Les entités peuvent également être appelées caractères d'échappement
syntaxe d'entité
&nom de l'entité ;
Entités couramment utilisées
espace
<
>
>
Symbole du droit d'auteur
©
Balises d'image
<img />
Utilisez la balise image pour introduire une image externe sur la page
Les attributs
src
Chemin pointant vers une image externe, vous pouvez utiliser des chemins relatifs
alt
Spécifiez une description pour l'image si elle ne peut pas être chargée
Les moteurs de recherche utilisent principalement cet attribut pour identifier le contenu de l'image.
Si vous n'écrivez pas cet attribut, le moteur de recherche inclura l'image.
largeur
Définir la largeur de l'image
hauteur
Définir la hauteur de l'image
Format d'image
JPEG
Images colorées, par exemple des photos
GIF
Couleur unique, images transparentes simples, graphiques dynamiques
PNG
Images colorées, complexes et transparentes
Principes de sélection d'images
L'effet est cohérent, utilisez petit
L'effet est incohérent, utilisez-le avec un meilleur effet
chemin relatif
Un chemin relatif au répertoire où se trouve la ressource actuelle
Vous pouvez utiliser ../ pour revenir au répertoire de premier niveau, et pour revenir à plusieurs niveaux, utilisez plusieurs ../
Spécification de la syntaxe xHtml
1.HTML n'est pas sensible à la casse, mais essayez d'utiliser des minuscules
2.Les commentaires HTML ne peuvent pas être imbriqués
3. L'étiquette doit avoir une structure complète
Soit apparaissent par paires
ou étiquette à fermeture automatique
4. Les balises peuvent être imbriquées mais ne peuvent pas être imbriquées.
5. L'attribut doit avoir une valeur et la valeur doit être entre guillemets simples et doubles.
étiquette de texte
exprimer l'emphase dans le ton
Indique l'importance du contenu
signifie de simples italiques
Indique simplement en gras
Indique du contenu tel que des règles détaillées
Pour indiquer un contenu de référence, cite peut être utilisé pour tout ce qui a un titre de livre.
devis court, devis en ligne
référence longue, référence au niveau du bloc
exposant
indice
Contenu supprimé
Contenu inséré
Les balises préformatées peuvent conserver le formatage des espaces et des sauts de ligne dans le code
représente le code du programme
liste
liste non ordonnée
Utilisez ul pour créer une liste non ordonnée et utilisez li pour représenter un élément de liste dans la liste.
Liste non ordonnée utilisant des symboles comme puces
liste ordonnée
Utilisez ol pour créer une liste non ordonnée et utilisez li pour représenter un élément de liste dans la liste.
Utilisez des nombres séquentiels comme puces
liste de définitions
Les éléments liés à une liste sont tous des éléments de bloc et peuvent être imbriqués les uns dans les autres.
Supprimer les puces
style de liste : aucun
mise en page
flotter
Utilisez float pour définir des éléments flottants
Valeur facultative
aucun
Valeur par défaut, pas de flottant, élément dans le flux de documents
gauche
L'élément flotte vers la gauche
droite
L'élément flotte vers la droite
Caractéristiques
1. Une fois l'élément flottant, il se détachera complètement du flux de documents.
2. Après avoir flotté, l'élément se déplacera toujours vers le haut de l'élément parent.
3. Il cessera de bouger jusqu'à ce qu'il rencontre la bordure de l'élément parent ou d'autres éléments flottants.
4. Si l'élément flottant est au-dessus d'un élément de bloc, l'élément flottant ne couvrira pas l'élément de bloc.
5. L'élément flottant ne dépassera pas l'élément frère flottant au-dessus de lui et il peut être aligné d'un côté au maximum.
6. Les éléments flottants ne couvriront pas le texte. Le texte s'enroulera automatiquement autour des éléments flottants. Vous pouvez obtenir un effet d'habillage du texte en flottant.
Caractéristiques des éléments après flottation
Lorsqu'un élément flotte, il est complètement supprimé du flux de documents.
élément de bloc
Une fois que l'élément de bloc quitte le flux de documents
1. N'occupera pas de ligne
2. La largeur et la hauteur sont étirées par le contenu
éléments en ligne
Les éléments en ligne deviennent des éléments de bloc après avoir quitté le flux de documents.
très effondré
La hauteur de l'élément parent dans le flux de documents est étendue par défaut par les éléments enfants. Lorsque l'élément enfant se détache du flux de documents, il ne pourra pas prendre en charge la hauteur de l'élément parent, ce qui entraînera la hauteur de. l'élément parent à réduire.
Une fois la hauteur de l'élément parent réduite, les positions de tous les éléments se déplacent vers le haut, ce qui rend la mise en page de la page entière chaotique.
première méthode
Activez le BFC ou hasLayout de l'élément parent
BFC
Contexte de formatage de bloc
environnement de formatage au niveau du bloc
BFC est un attribut implicite de l'élément et est désactivé par défaut.
BFC peut être activé via certains styles spéciaux
Après avoir activé BFC, les éléments auront les caractéristiques suivantes :
1. Les marges verticales de l’élément parent ne chevaucheront pas celles des éléments enfants.
2. Les éléments avec BFC activé ne seront pas couverts par les éléments flottants.
3. Les éléments avec BFC activé peuvent contenir des éléments enfants flottants.
Comment activer BFC
1. Définissez l'élément pour qu'il flotte
2. Définir le positionnement absolu des éléments
3. Définissez le type d'élément sur inline-block
4. Définissez le débordement sur une valeur autre que celle par défaut
Généralement, overflow:hidden est utilisé pour activer BFC.
hasLayout
Il n'y a pas de BFC dans IE6, mais il existe un hasLayout similaire à BFC
Dans IE6, vous pouvez résoudre le problème de l'effondrement de la hauteur en activant hasLayout.
Le moyen le plus simple d'ouvrir avec un minimum d'effets secondaires
zoom:1
Lors de la définition d'une largeur autre que celle par défaut pour un élément, hasLayout sera automatiquement activé.
Deuxième méthode
Ajoutez un div vide à la fin de l'élément parent réduit, puis faites flotter le div.
L'utilisation de cette approche ajoute une structure inutile à la page
Troisième méthode
Utilisez la pseudo-classe after pour ajouter un élément block après l'élément parent et effacer son float
Le principe de cette méthode est le même que celui de la méthode 2, mais il n’est pas nécessaire d’ajouter la structure correspondante à la page.
position
Grâce au positionnement, les éléments de la page peuvent être placés n'importe où sur la page.
Utiliser la position pour définir le positionnement des éléments
Valeur facultative
statique
Valeur par défaut, le positionnement des éléments n'est pas activé
relatif
Activer le positionnement relatif des éléments
absolu
Activer le positionnement absolu des éléments
fixé
Activer le positionnement fixe des éléments
positionnement relatif
1. Une fois le positionnement relatif de l'élément activé, l'élément ne changera en aucune façon si le décalage n'est pas défini.
2. Les éléments positionnés relativement sont positionnés par rapport à leur propre position dans le flux de documents.
3. Les éléments relativement positionnés ne se détacheront pas du flux de documents
4. Le positionnement relatif ne change pas la nature de l'élément, qu'il s'agisse d'un élément bloc ou d'un élément bloc, ou d'un élément en ligne ou d'un élément en ligne.
5. Les éléments relativement positionnés seront élevés à un niveau supérieur
positionnement absolu
1. Une fois l'élément défini en positionnement absolu, si le décalage n'est pas défini, la position de l'élément ne changera pas.
2. Un élément positionné de manière absolue est positionné par rapport à son élément ancêtre le plus proche pour lequel le positionnement est activé. Si le positionnement n'est pas activé pour tous les éléments ancêtres, il est positionné par rapport à la fenêtre du navigateur.
3. Les éléments positionnés de manière absolue se détacheront complètement du flux de documents.
4. Le positionnement absolu changera la nature de l'élément. Bloc variable en ligne, la hauteur et la largeur du bloc sont étirées par le contenu, et n'occupent pas de ligne exclusive
5. Le positionnement absolu élèvera l'élément à un niveau supérieur
Positionnement fixe
Le positionnement fixe est un type particulier de positionnement absolu. La plupart de ses caractéristiques sont les mêmes que le positionnement absolu.
La différence est que les éléments positionnés de manière fixe sont toujours positionnés par rapport à la fenêtre du navigateur. Et il ne défilera pas avec la barre de défilement
IE6 ne prend pas en charge le positionnement fixe
Hiérarchie
Éléments positionnés > Éléments flottants > Éléments dans le flux de documents
Lorsque le positionnement est activé pour un élément, le niveau de l'élément peut être défini via z-index.
Plus la valeur du z-index est élevée, plus les éléments prioritaires seront affichés.
Si les valeurs du z-index sont les mêmes ou s'il n'y a pas de z-index, l'élément inférieur sera affiché en premier.
Les éléments parents ne couvrent jamais les éléments enfants
Compenser
Lorsque le positionnement est activé pour un élément, la position de l'élément peut être définie par décalage.
gauche
La distance à gauche de l'élément depuis la position de positionnement
haut
La distance entre le haut de l'élément et la position de positionnement
droite
La distance à droite de l'élément depuis la position de positionnement
bas
La distance inférieure de l'élément à partir de la position de positionnement
Généralement, seules deux valeurs sont utilisées pour définir la position d'un élément.
Introduction au cours
architecture logicielle
C/S, client/serveur
1. Généralement, le logiciel que nous utilisons est une architecture C/S
2. Par exemple, les logiciels du système QQ, 360, office, XMind
3.C représente le client. Les utilisateurs utilisent le logiciel via le client.
4.S représente le serveur responsable du traitement de la logique métier du logiciel.
Caractéristiques
1. Le logiciel doit être installé avant utilisation
2. Lorsque le logiciel est mis à jour, le serveur et le client doivent être mis à jour en même temps.
Le logiciel d'architecture 3.C/S ne peut pas être utilisé sur plusieurs plates-formes
4. Le client et le serveur du logiciel d'architecture C/S communiquent en utilisant leurs propres protocoles, ce qui est relativement sûr.
B/S, navigateur/serveur
1.B/S est essentiellement C/S, mais le logiciel d'architecture B/S utilise le navigateur comme client du logiciel.
2. Le logiciel d'architecture B/S utilise le logiciel en utilisant un navigateur pour accéder à la page Web.
3. Par exemple : JD.com Taobao 12306 Zhihu Sina Weibo
Caractéristiques
1. Le logiciel n'a pas besoin d'être installé, utilisez simplement le navigateur pour accéder à l'URL spécifiée.
2. Lorsque le logiciel est mis à jour, le client n'a pas besoin d'être mis à jour.
3. Le logiciel peut être multiplateforme et peut être utilisé tant qu'il y a un navigateur dans le système.
4. Le logiciel d'architecture B/S utilise le protocole HTTP commun pour la communication entre le client et le serveur, ce qui est relativement dangereux.
base
Le système décimal consiste à ajouter un au nombre complet.
binaire
0 1
10 11 100 101 110 111
décimal
0 1 2 3 4 5 6 7 8 9
10 11 12 13 14. . .
hexadécimal
Entrez 1 si vous avez plus de 16 ans
0 1 2 3 4 5 6. . . 9 a b c d e f
10 11 12 ... 19 1a 1b 1c 1d 1e 1f
Puisque l'hexadécimal contient 16, plusieurs caractères spéciaux doivent être définis pour représenter 10 11 12 13 14 15.
Utilisez a b c d e f pour représenter respectivement 10 11 12 13 14 15
Octal
Entrez 1 si 8 ou plus
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17 20 21 22
Problème de code tronqué
Raisons des caractères tronqués
L'ordinateur est une machine très stupide. Il ne sait que deux choses 0 1.
Tout contenu enregistré sur l'ordinateur devra éventuellement être converti en un codage binaire de 0 à 1 pour être enregistré, y compris le contenu des pages Web.
Par exemple : La Chine, au bas de l'ordinateur, devra peut-être être convertie en 1010001001010101011010.
Lors de la lecture du contenu, vous devez encoder le binaire et le convertir en contenu correct.
codage
Le processus de conversion de caractères en codage binaire selon certaines règles
décodage
Le processus de conversion du codage binaire en caractères selon certaines règles
jeu de caractères
Les règles utilisées pour l'encodage et le décodage sont appelées jeux de caractères.
Jeux de caractères courants
ASCII
ISO-8859-1
GBK
GB2312
Encodage par défaut pour les systèmes chinois
UTF-8
Code universel, prend en charge tous les textes de la terre
ANSI
Enregistrez automatiquement les fichiers dans l'encodage par défaut du système
La cause première des caractères tronqués est que le codage et le décodage utilisent des jeux de caractères différents.
Dans les navigateurs système chinois, GB2312 est utilisé par défaut pour le décodage.
modèle de boîte
CSS définit chaque élément sur une boîte rectangulaire
Définissez tous les éléments sous forme de zones pour faciliter la mise en page
Lorsque ces éléments sont tous des cases, notre mise en page devient des cases de placement sur la page.
modèle de boîte
Chaque coffret est composé des pièces suivantes
zone de contenu
La zone de contenu est équivalente à l'espace où la boîte stocke les objets
La zone de contenu se trouve dans la partie la plus intérieure de la boîte
Tous les éléments enfants d'un élément sont placés dans la zone de contenu de l'élément parent
Paramètres de la zone de contenu
largeur
largeur de la zone de contenu
hauteur
hauteur de la zone de contenu
rembourrage
Le remplissage fait référence à la distance entre la zone de contenu et la bordure. Le remplissage affecte la taille de la boîte.
Il y a quatre directions de remplissage dans la boîte.
dessus de rembourrage
rembourrage à droite
fond de rembourrage
rembourrage-gauche
rembourrage
Le remplissage dans quatre directions peut être défini en même temps et les règles sont cohérentes avec la largeur de la bordure.
rembourrage : en haut à droite en bas à gauche
remplissage : haut, gauche, droite, bas
rembourrage : haut, bas, gauche et droite
remplissage : haut, bas, gauche, droite
La taille de la boîte visible est déterminée par la zone de contenu, le remplissage et les bordures.
cadre
Le côté le plus extérieur de la boîte visible est la boîte de bordure, et la bordure est le bord de la boîte.
Définir des frontières
La définition de la bordure nécessite la définition de trois styles en même temps, et l'un d'eux est indispensable.
largeur de la bordure
largeur de la bordure
Vous pouvez spécifier la largeur des quatre bordures en même temps ou séparément.
règle
quatre valeurs
largeur de bordure : 10 px, 20 px, 30 px, 40 px ;
largeur de bordure : en haut à droite en bas à gauche ;
trois valeurs
largeur de bordure : 10 px, 20 px, 30 px ;
border-width : haut, gauche et bas ;
deux valeurs
largeur de bordure : 10px 20px ;
largeur de bordure : haut, bas, gauche et droite ;
une valeur
largeur de bordure : 10 px ;
largeur de bordure : haut, bas, gauche et droite ;
couleur de la bordure
couleur de la bordure
style de bordure
Style de bordure
En plus de ces trois styles, CSS fournit également
bordure-xxx-largeur
bordure-xxx-couleur
style frontière-xxx
xxx peut être
haut
droite
bas
gauche
Ces styles vous permettent de spécifier individuellement la couleur, la largeur et le style des quatre côtés.
Propriété abrégée pour border
frontière
bordure gauche
bordure supérieure
bordure droite
Bordure du bas
Ces attributs peuvent définir simultanément des styles liés aux bordures.
la bordure peut définir la couleur, la largeur et le style de quatre côtés en même temps
border-xxx peut définir un certain bord séparément
règle
En utilisant ces styles, vous pouvez définir la couleur de la bordure en même temps. Différents attributs sont séparés par des espaces et il n'y a aucune exigence d'ordre.
marges
La distance entre la zone de marge et les autres zones. La marge n'affectera pas la taille de la zone visible, mais elle affectera la position de la zone.
A également des marges dans quatre directions
marge supérieure
marge droite
marge inférieure
marge gauche
Attribut abrégé
marge
Les règles sont les mêmes que pour le remplissage
valeur de la marge
Peut être réglé sur automatique
Si vous définissez les marges gauche et droite individuellement sur automatique, cela définira les marges gauche ou droite à leur valeur maximale.
Si les marges gauche et droite sont définies sur auto, les marges gauche et droite seront définies sur une valeur égale, centrant ainsi un élément enfant horizontalement dans son élément parent.
marge : 0 auto
Peut être défini sur des valeurs négatives
Si margin est défini sur une valeur négative, l'élément se déplace dans la direction opposée
chevauchement des marges
Les marges verticales adjacentes se chevauchent
Les marges des éléments adjacents prendront la valeur maximale
Les marges de l'élément enfant seront transmises à l'élément parent
Les marges horizontales ne se chevauchent pas, mais sont additionnées
Modèle de boîte pour les éléments en ligne
largeur
hauteur
pas de support
rembourrage
Supporte le rembourrage horizontal
Le remplissage vertical est également pris en charge, mais n'affectera pas la mise en page.
frontière
Prend en charge les bordures dans quatre directions, mais les bordures verticales n'affecteront pas la disposition
marge
Prise en charge des marges horizontales
Ne prend pas en charge l'orientation verticale
Styles liés au modèle de boîte
afficher
Définir le type d'affichage d'un élément
Valeur facultative
aucun
L'élément ne sera pas affiché sur la page et n'occupera pas la position de la page
bloc
L'élément apparaîtra comme un élément de bloc
en ligne
L'élément apparaîtra comme un élément en ligne
bloc en ligne
L'élément apparaîtra comme un élément de bloc en ligne
Comprend à la fois des éléments en ligne et en bloc
N'occupez pas une ligne
Peut définir la largeur et la hauteur
visibilité
Définir si l'élément est affiché sur la page
Valeur facultative
visible
Valeur par défaut, l'élément s'affiche normalement sur la page
caché
L'élément n'est pas affiché sur la page, mais occupe quand même une position sur la page
débordement
Définir la façon dont un élément gère le contenu de débordement
Valeur facultative
visible
Valeur par défaut, le contenu de débordement ne sera pas traité et affiché en dehors de l'élément parent.
caché
Le contenu débordant sera masqué et ne sera pas affiché.
faire défiler
Ajouter des barres de défilement horizontales et verticales à l'élément parent
Des barres de défilement seront ajoutées, que le contenu déborde ou non.
auto
Générez automatiquement des barres de défilement selon vos besoins
flux de documents
Le flux de documents fait référence à un emplacement dans une page Web
Le flux de documents constitue la base d'une page Web et la couche la plus basse d'une page Web. Tous les éléments sont organisés par défaut dans le flux de documents.
Les éléments sont disposés de gauche à droite et de haut en bas dans le flux de documents par défaut (conformément à nos habitudes d'écriture)
élément de bloc
1. Les éléments de bloc sont disposés de haut en bas dans le flux de documents.
2. La largeur d'un élément de bloc dans le flux de documents est par défaut de 100 % de l'élément parent.
3. La hauteur de l'élément de bloc dans le flux de documents est étirée par défaut en fonction du contenu.
éléments en ligne
1. Les éléments en ligne sont disposés de gauche à droite dans le flux de documents. Si une ligne ne suffit pas pour accueillir tous les éléments en ligne, passez à la ligne suivante et continuez à être disposés de gauche à droite.
2. Dans le flux de documents, la largeur et la hauteur des éléments en ligne sont étirées par défaut par le contenu.