Organisieren Sie tägliche Studiennotizen im HTML -Designmuster

In dieser Woche wurde kein Projekt durchgeführt, und ich habe das HTML -Designmodell untersucht. Ich werde meine Lernergebnisse diese Woche für Ihre Referenz organisieren und teilen

HTML -Design -Muster -Lernnotizen

Diese Woche habe ich hauptsächlich HTML -Designmuster gelernt, und jetzt werde ich meinen Lerninhalt wie folgt zusammenfassen:

eins. Lernen des Boxmodells

Es gibt ein grundlegendes Designmodell in CSS, das als Box -Modell bezeichnet wird, das definiert, wie Elemente als Kisten analysiert werden. Ich habe hauptsächlich sechs Arten von Boxmodellen gelernt, nämlich Inline-Boxmodell, Inline-Block-Boxmodell, Blockbox-Modell, Tabellenboxmodell, Absolute Box-Modell und schwebendes Positionierungsboxmodell.

Das Boxmodell -Designmuster ist in CSS integriert, das die Beziehung zwischen den folgenden Eigenschaften definiert: Grenzen, Grenzen, Füllungen und Inhalt. Jedes Attribut enthält vier Teile: obere, rechts, untere und links; Diese vier Teile können zur gleichen Zeit oder separat eingestellt werden. Die Grenzen können in Größe und Farbe unterteilt werden. Wir können es als die Dicke der Box verstehen, die im Leben zu sehen ist und welche Farbe der Box besteht. Die Grenze ist, wie weit die Box von anderen Dingen abgehalten werden sollte. Der Inhalt ist das, was in der Box enthalten ist und das Material im Ersatzteil in der Füllbox gefüllt ist.

Inline -Box -Modelle werden in der Reihenfolge der Inline -Anordnung analysiert, sie werden horizontal von links nach rechts sortiert. Wenn sie die Breite ihrer nächsten Angrenzungen des Terminalsblocks überschreiten, werden sie durch eine neue Reihe ersetzt. Breite, Größe und Überlauf funktionieren nicht bei Inline -Elementen, da sie immer mit der Breite und Höhe des Inhalts übereinstimmen. Margin und Linienhöhe können auf besondere Weise auf Inline-Elemente angewendet werden. Der horizontale Rand verändert die Position von Inline -Elementen in der Reihenfolge der Anordnung. Ein positiver Wert von Margen-Links hält das Element vor dem Element fern, während ein negativer Wert es näher rückt. Ein positiver Wert des Randrechts wird das Element von seinem nächsten Element fernhalten, während ein negativer Wert es näher rückt. Margin-Top und Margin-Bottom eignen sich nicht für Inline-Elemente. Die Grenze setzt die Grenzen für Inline -Elemente auf besondere Weise an, und die horizontale Grenze verändert die Position von Inline -Elementen in der Anordnung. Der linke Rand wird das Element links und der rechte Rand nach rechts das nächste Element. Die oberen und unteren Grenzen werden außerhalb des inneren Randes angezeigt, erstrecken sich jedoch nicht auf die Zeilenhöhe oder ändern die Position des Elements in vertikaler Richtung. Die Vorlage dieses Musters kann wie folgt ausgedrückt werden: