Organisez des notes d'étude quotidiennes dans le modèle de conception HTML

Il n'y a pas de projet réalisé cette semaine et j'ai étudié le modèle de conception HTML. Je vais organiser et partager mes résultats d'apprentissage cette semaine pour votre référence

Notes d'apprentissage du modèle de conception HTML

Cette semaine, j'ai principalement appris les modèles de conception HTML, et maintenant je vais résumer mon contenu d'apprentissage comme suit:

un. Apprentissage du modèle de boîte

Il existe un modèle de conception de base dans CSS appelé le modèle de boîte, qui définit comment les éléments sont analysés en cases. J'ai principalement appris six types de modèles de boîtes, à savoir le modèle de boîte en ligne, le modèle de boîte à blocage en ligne, le modèle de boîte à blocs, le modèle de boîte de table, le modèle de boîte absolue et le modèle de boîte de positionnement flottant.

Le modèle de conception du modèle de boîte est intégré à CSS, qui définit la relation entre les propriétés suivantes: limites, frontières, remplissages et contenu. Chaque attribut comprend quatre parties: supérieur, droit, inférieur et gauche; Ces quatre parties peuvent être réglées en même temps ou séparément; Les bordures peuvent être divisées en taille et en couleur. Nous pouvons le comprendre comme l'épaisseur de la boîte observée dans la vie et de quelle couleur de la boîte est faite. La frontière est la distance que la boîte doit rester des autres choses. Le contenu est ce qui est contenu dans la boîte et le matériau rempli dans la pièce de rechange dans la boîte de remplissage.

Les modèles de boîtes en ligne sont analysés dans l'ordre des dispositions en ligne, ils sont triés horizontalement de gauche à droite, et lorsqu'ils dépassent la largeur de leurs ancêtres le plus proches en bloc de terminal, ils sont remplacés par une nouvelle ligne. La largeur, la hauteur et le débordement ne fonctionnent pas sur les éléments en ligne, car ils correspondent toujours à la largeur et à la hauteur du contenu. La marge et la hauteur de ligne peuvent être appliquées aux éléments en ligne d'une manière particulière. La marge horizontale modifie la position des éléments en ligne de l'ordre de disposition. Une valeur positive de la marge-gauche éloignera l'élément de l'élément avant, tandis qu'une valeur négative le rapprochera. Une valeur positive de la marge droite éloignera l'élément de son prochain élément, tandis qu'une valeur négative le rapprochera. La marge et la marge-fond ne fonctionnent pas pour les éléments en ligne. La frontière fixe les frontières des éléments en ligne d'une manière spéciale, et la frontière horizontale modifiera la position des éléments en ligne dans la disposition. La bordure de gauche fera l'élément à gauche, et la bordure droite fera le prochain élément à droite. Les bordures supérieures et inférieures seront affichées à l'extérieur de la marge intérieure, mais ils ne s'étendent pas à la hauteur de la ligne ni ne modifient la position de l'élément dans la direction verticale. Le modèle de ce modèle peut être exprimé comme suit: