1. processus de rendu html
Selon l'arborescence du répertoire du document, à partir du nœud racine, de l'élément parent à l'élément enfant, puis à l'élément parent suivant jusqu'à l'élément enfant
2. Le processus de calcul des valeurs de propriété CSS
Le processus de calcul de la valeur d'attribut à partir de zéro. Remarque: La condition préalable au rendu de chaque élément html est que tous les styles css de l'élément soient précieux. (Il n'existe pas une fois que nous l'avons défini. En règle générale, le navigateur donne la valeur par défaut lorsqu'elle n'est pas définie)
Déterminez d'abord la valeur de la déclaration: reportez-vous à la déclaration d'attribut qui n'est pas rouge dans la feuille de style (style CSS, y compris les valeurs par défaut, etc.) comme valeur d'attribut du css.
b. Conflit en cascade: utilisez des règles en cascade (décrites plus loin) pour déterminer la valeur déclarée en conflit.
Par exemple: les deux suivants sont des conflits en cascade
h1{
color: red }
.head h1{
color: red }
c. Utiliser l'héritage: après avoir défini les valeurs de propriété CSS via a et b, les propriétés restantes n'ont aucune valeur. Si la propriété peut être héritée, la valeur de l'élément parent est héritée.
d. Utiliser les valeurs par défaut: après avoir transmis a, b et c, les valeurs restantes utilisent à nouveau le style par défaut du navigateur.
3. Règles en cascade
a. Importance
! important> Style de l'auteur (style écrit par nous-mêmes)> Style par défaut du navigateur
b. Particularité (la priorité des
sélecteurs CSS) La méthode de calcul des sélecteurs CSS consiste à comparer un nombre à quatre chiffres de
milliers: pour déterminer s'il existe un style en ligne, s'il y en a un, il vaut 1, sinon il vaut 0.
Place des centaines: le nombre de tous les sélecteurs d'ID dans le sélecteur CSS.
Tens: le nombre total de sélecteurs de classe, de sélecteurs d'attributs et de sélecteurs de pseudo-classe dans les sélecteurs CSS.
Unités: Le nombre total de sélecteurs d'éléments et de sélecteurs de pseudo-éléments dans les sélecteurs CSS.
Remarque: le système de report n'est pas décimal, il est de 225 report.
c. Ordre de la source
La priorité inférieure de l'écriture de code est supérieure
4. Héritage CSS
L'élément enfant hérite principalement de la plupart des attributs de contenu textuel de l'élément parent
5. Composition de la boîte
内容 ， remplissage ， bordure ， marge
6. Caractéristiques de la zone de ligne
a. Étendre le long du contenu. Si le contenu est renvoyé à la ligne, la zone de ligne sera tronquée à la ligne suivante et la zone de ligne ne peut pas être définie en largeur et en hauteur. (La boîte de bloc enveloppe tout le contenu et n'est pas affectée par les sauts de ligne)
b. La taille de la police, le type de police et la hauteur de ligne pour ajuster la largeur et la hauteur de la zone de ligne
c. La marge de bordure de remplissage de la zone de ligne est effective dans le sens horizontal et n'occupera pas réellement d'espace.
d. Des plis vierges se produiront à l'intérieur ou entre les boîtes de ligne.
e. Les boîtes de rangées évitent les boîtes flottantes lorsqu'elles sont disposées
Spécial: Pour la
plupart des éléments, le résultat affiché sur la page dépend du contenu de l'élément, qui est appelé "élément non remplaçable". Pour un petit nombre d'éléments, les résultats affichés sur la page dépendent des attributs de l'élément, appelés «éléments modifiables», tels que img, vidéo, etc. La plupart des éléments remplaçables sont des boîtes de ligne, mais comme les boîtes de bloc de ligne, les tailles dans le modèle de boîte sont toutes valides.
7. Caractéristiques de Fast Box
Affichage de la zone de bloc de ligne Le bloc en ligne n'occupe pas une seule ligne. Toutes les tailles sont valides
. Le pliage du blanc se produit à l'intérieur des blocs de ligne ou entre les blocs de ligne.
8. Caractéristiques de la boîte de bloc
a. Direction horizontale
La largeur totale de la boîte de bloc est égale à la largeur du bloc contenant (la boîte de contenu de l'élément parent).
La valeur de auto absorbe l'espace restant et la capacité d'absorption de la largeur est supérieure à la marge. Si la largeur, la bordure, le remplissage et la marge ont été calculés et qu'il reste de l'espace à gauche, l'espace sera absorbé par margin-right.
marge: 0 auto; centrée
b) Direction
verticale La hauteur verticale de chaque bloc de bloc: s'adapte automatiquement à la hauteur du contenu. margin: auto représente 0
c. Les marges supérieure et inférieure de deux blocs de blocs de flux normal (pas de flottement ni de positionnement, etc.) seront fusionnées si elles sont adjacentes l'une à l'autre. Les deux marges prennent la valeur maximale. Les éléments frères et parents et enfants sont applicables, sauf si les marges sont séparées, comme une bordure Attendre.
9. Valeur en pourcentage
Les valeurs en pourcentage du remplissage, de la marge et de la largeur sont basées sur la largeur de l'élément parent. Notez que l'élément parent doit définir une valeur, sinon le pourcentage n'est pas valide.
10. Élément flottant
a. Une fois l'élément flottant, il doit s'agir d'une boîte de bloc
b. Après le flottement, largeur et hauteur: auto; adaptez-vous à la largeur et à la hauteur du contenu. margin: auto; la valeur est 0. Les valeurs de bordure, de remplissage et de pourcentage sont les mêmes que celles du flux normal (article 8).
c. Les boîtes flottantes éviteront les boîtes de flux régulières dans le bloc conteneur, et les boîtes flottantes seront ignorées lorsque les boîtes de bloc de flux régulier sont disposées. Par exemple: la boîte de flux régulier est avant la boîte flottante, et la boîte flottante sera disposée en ligne sous le flux régulier. La boîte d'écoulement conventionnelle est derrière la boîte flottante, et la boîte flottante couvrira la boîte d'écoulement conventionnelle.
d. Si le contenu du texte n'est pas enveloppé dans la zone de ligne, le navigateur générera par défaut un contenu de texte enveloppé de zone de ligne, ce qui équivaut à l'élément p enveloppant le contenu du texte, et le navigateur générera une étendue dans l'élément p (notez que cela équivaut uniquement à, Mais pas une durée supplémentaire)
e. Réduction de la hauteur: La hauteur automatique de la boîte de flux conventionnelle ne sera pas prise en compte lors du calcul de la boîte flottante, de sorte que la hauteur de l'élément parent n'emballe pas la boîte flottante.
Solution: utilisez clear (créez un div ou directement après)
11. Positionnement
a. Les éléments de positionnement quitteront le flot de documents (sauf pour le positionnement relatif).
b) Lors du positionnement, s'il y a un conflit entre la gauche et la droite, la gauche prévaudra et le conflit ci-dessus prévaudra.
c. Bloc contenant (zone) positionné de manière absolue, recherchez le premier élément de l'élément ancêtre pour définir le positionnement de l'intérieur vers l'extérieur, la case remplie de cet élément est le bloc conteneur (zone), si elle n'est pas trouvée, la page Web entière est le bloc conteneur.
d. Le bloc conteneur positionné de manière fixe est la fenêtre d'affichage du navigateur entière.
e) Positionnement absolu et positionnement relatif, largeur et hauteur auto, afin de s'adapter au contenu.
f. Centrage de l'état de positionnement:
1. 定宽高
2. 将左右（上下）距离设为0
3. 将左右（上下）margin设为auto。
注意：在绝对定位和固定定位状态下，margin：auto会自动吸收剩空间。一般居中的广告就是这么显示
g) Positionnement absolu et positionnement fixe: il doit s'agir d'un bloc, il ne doit pas être flottant et il n'y a pas de fusion de marge.