Tägliche Studiennotizen im HTML-Designmuster

Studiennotizen zu HTML-Entwurfsmustern

Diese Woche habe ich vor allem HTML-Designmuster gelernt. Meine Lerninhalte möchte ich wie folgt zusammenfassen:

eins. Das Boxmodell lernen

Es gibt in CSS ein grundlegendes Entwurfsmodell namens Boxmodell, das definiert, wie Elemente als Boxen analysiert werden. Ich habe hauptsächlich sechs Boxmodelle gelernt, nämlich Inline-Boxmodell, Inline-Block-Boxmodell, Block-Boxmodell, Tabellen-Boxmodell, absolutes Boxmodell und Floating-Boxmodell.

Das Boxmodell-Entwurfsmuster ist in CSS integriert und definiert die Beziehung zwischen den folgenden Eigenschaften: Rahmen, Strich, Polsterung und Inhalt. Jedes Attribut besteht aus vier Teilen: oben, rechts, unten und links. Diese vier Teile können gleichzeitig oder separat festgelegt werden. Der Rand hat unterschiedliche Größen und Farben, was wir als die Dicke der Kästen verstehen können, die wir im wirklichen Leben sehen, und als die Farbe des Materials, aus dem der Kästchen besteht. Die Grenze gibt an, wie viel Abstand der Kästchen zu anderen Dingen eingehalten werden soll, der Inhalt gibt an, was sich in dem Kästchen befindet, und das Material, mit dem der leere Raum im gefüllten Kästchen ausgefüllt wird.

1.1 Inline-Box-Modell

Inline-Boxen werden in der Inline-Reihenfolge analysiert. Dabei werden sie horizontal von links nach rechts sortiert und in eine neue Zeile umbrochen, wenn sie die Breite ihres nächsten Terminalblock-Vorfahrens überschreiten. Breite, Höhe und Überlauf haben auf Inline-Elemente keine Auswirkung, da sie immer auf die Breite und Höhe des Inhalts eingestellt sind. Ränder und Zeilenhöhen können auf spezielle Weise auf Inline-Elemente angewendet werden. Horizontale Ränder ändern die Position von Inline-Elementen in der Sortierreihenfolge. Ein positiver Wert für den linken Rand verschiebt das Element vom davor liegenden Element weg, während ein negativer Wert es näher heranbewegt. Ein positiver Wert für den rechten Rand verschiebt ein Element weiter vom darunterliegenden Element weg, während ein negativer Wert es näher heranbringt. Margin-top und Margin-bottom haben keine Auswirkung auf Inline-Elemente. Border legt den Rahmen für Inline-Elemente auf spezielle Weise fest. Der horizontale Rahmen ändert die Position der Inline-Elemente in der Anordnung. Ein linker Rand richtet das Element links aus und ein rechter Rand richtet das nächste Element rechts aus. Obere und untere Ränder erscheinen außerhalb der Polsterung, reichen aber nicht bis zur Zeilenhöhe und ändern nicht die vertikale Position des Elements. Die Vorlage für dieses Muster kann wie folgt ausgedrückt werden:

Dieses Entwurfsmuster kann auf jedes Inline-Element und jedes Element angewendet werden, das inline angezeigt wird.

1.2 Inline-Blockbox-Modell

Ein Inline-Blockelement wird wie jede andere Inline-Box in der Inline-Reihenfolge platziert, mit dem Unterschied, dass es auch die Eigenschaften eines Blockelements besitzt: Rand, Rahmen, Polsterung, Breite und Höhe. Inline-Blockelemente kreuzen keine anderen Zeilen. Die Zeilenhöhe von Inline-Blockelementen wird erhöht, um ihrer eigenen Höhe, Polsterung, Rahmen und Rändern gerecht zu werden. Breite und Höhe legen die Höhe und Breite eines Elements fest. Sie können ein ersetztes Element, z. B. ein Bild, vergrößern oder verkleinern, indem Sie seine Breite oder Höhe auf einen bestimmten Wert festlegen. Sie können auch width:auto und height:auto verwenden, um die Größe des ersetzten Elements der tatsächlichen Größe anzupassen. Angenommen, es handelt sich um einen Bereich mit „display:inline-block“. Dann können Sie die Größe anpassen, indem Sie dessen Breite und Höhe festlegen. Sie können Inline-Blockelemente auch mit width:auto und height:auto umschließen. Mit width:100% können Sie ein Inline-Blockelement verlängern, sodass es einem Blockelement gleicht. Das Randelement ändert die Größe des Elements in vier Richtungen: oben, unten, links und rechts. Rand oben und Rand unten erhöhen oder verringern die Zeilenhöhe, während Rand links und Rand rechts das Element in horizontaler Richtung näher an die Elemente davor und danach heranbringen oder den Abstand zwischen ihm und den Elementen davor und danach vergrößern. Ränder und Polsterungen können auch verwendet werden, um die äußere Größe von Inline-Elementen zu erweitern.

Das typische Muster des Inline-Boxmodells sieht wie folgt aus:

Dieses Entwurfsmuster kann auf alle Inline-Elemente angewendet werden.

1.3 Blockbox-Modell

In einer Blockformatierungsumgebung wird das Blockboxmodell vertikal von oben nach unten angeordnet. Dies ist die normale Anordnung von Blockelementen. Blockboxen können andere Blockboxen enthalten oder eine Blockformatierungsumgebung beenden und eine Inline-Formatierungsumgebung beginnen, die Inline-Boxen enthält. Ein Klemmenblockelement erstellt innerhalb seines inneren Kastens eine Inline-Formatierungsumgebung, sein äußerer Kasten befindet sich jedoch immer in einer Blockformatierungsumgebung.

Ein Blockelement kann die gleiche Länge wie sein übergeordnetes Element haben oder kleiner oder größer als sein übergeordnetes Element sein. Wenn seine Größe größer als das übergeordnete Element ist, läuft es über. Mit der Überlaufeigenschaft wird gesteuert, wie der Browser mit Überläufen umgeht. Im Blockbox-Modell werden Breite und Höhe weiterhin verwendet, um die Breite und Höhe des Elements festzulegen. Dabei bedeutet width:auto, dass die Breite des Elements mit dem übergeordneten Element übereinstimmt, und height:auto bedeutet, dass die Höhe des Elements alle untergeordneten Elemente umschließt. margin-left und margin-right rücken die Seiten eines gestreckten Blockelements ein oder erweitern sie. Sie passen die Größe des Blockelements an. Mit den Optionen „Margin-top“ und „Margin-bottom“ können Sie den Abstand zwischen verschiedenen Blockelementen vergrößern oder verkleinern oder sogar zu einer Überlappung dieser Elemente führen. Der Browser versetzt die oberen und unteren Ränder benachbarter Blockelemente. Verwenden Sie margin-left:auto und margin-right:auto, um die horizontale Ausrichtung von Blockelementen mit fester Größe zu steuern. Wenn für ein Blockelement eine Breite festgelegt ist, bewirkt margin-left:auto, dass das Blockelement auf der rechten Seite des übergeordneten Elements angeordnet wird, und margin-right:auto bewirkt, dass das Blockelement auf der linken Seite des übergeordneten Elements angeordnet wird. Durch gleichzeitiges Festlegen von margin-left:auto und margin-right:auto wird das Blockelement in der Mitte des übergeordneten Elements platziert. Ränder und Polsterungen erweitern zudem die äußere Breite und Höhe des Boxmodells. Das Blockbox-Modell hat folgendes Muster:

Dieses Entwurfsmuster kann für alle Blockelemente verwendet werden.

1.4 Tischbox-Modell

Eine Tabelle ist ein blockförmiger Kasten, der Zellenzeilen enthält. Tabellen sind ebenfalls in Blöcken angeordnet und die Zellen einer Tabelle sind in Zeilen und Spalten angeordnet. Tabellen haben Ränder, aber keine Polsterung. Zellen haben eine Polsterung, aber keine Ränder. Mit width können Sie die Breite der Tabelle festlegen. Dabei ist die Breite des Rahmens gemeint und nicht die Breite des inneren Rands. Mit height können Sie die Höhe der Tabelle festlegen. Die Höhe bezieht sich hier auf die Höhe außerhalb des Rahmens und nicht auf die Höhe innerhalb der Polsterung. Die Art und Weise, wie Ränder interpretiert werden, hängt davon ab, ob die Tabelle skaliert, umbrochen oder gestreckt ist. Bei einer festen Größe und einem Umbruch verschieben die Ränder die Tabelle und die nachfolgenden Elemente. Negative Ränder führen dazu, dass benachbarte Elemente die Tabelle überlappen. Beim Strecken der Tabelle wird diese durch die Ränder eingerückt, wodurch ihre Innenmaße kleiner werden und die Größe der Zellen reduziert wird. Ein Rahmen verkleinert das innere Feld einer Tabelle mit einer bestimmten Größe oder Ausdehnung. Auf Tabellen kann keine Überlauffunktion angewendet werden, da Tabellen nicht überlaufen können, sondern nur Tabellenzellen. Sie sollten Zellen overflow:hidden zuweisen, um sicherzustellen, dass alle Browser beim Überlauf von Zellen mit fester Größe ein einheitliches Verhalten zeigen. Border-collapse bestimmt, ob benachbarte Ränder zu einem zusammengeführt werden, und table-layout bestimmt, ob die Tabelle eine feste Größe hat (fixiert) oder sich je nach Inhalt ändert (auto). Das Tabellenboxmodell weist das folgende Muster auf:

Dieses Entwurfsmuster kann für alle Tabellenelemente verwendet werden.

1.5 Absolutes Positionierungsboxmodell

Ein absolut positioniertes Element wird aus der normalen Reihenfolge der Elemente herausgenommen und eine Ebene höher oder tiefer platziert. Es wird relativ zum nächstgelegenen Vorgänger positioniert oder an einer bestimmten Position im Ansichtsfenster fixiert. Sie können seine Größe festlegen, es umbrechen oder strecken, damit es der Größe des übergeordneten Elements entspricht. Jedes Element kann absolut positioniert werden. Die Position einer absolut positionierten Box hat keinen Einfluss auf die Position anderer Boxen.

z-index steuert die Stapelreihenfolge der positionierten Elemente. Negative Werte platzieren sie unterhalb der normalen Anordnungsebene, positive Werte platzieren sie darüber. Je größer der Wert, desto weiter vorne steht es in der vertikalen Anordnung. Sie können dem absolut positionierten Boxmodell oben, links, unten und rechts zuweisen. Sobald ein Wert festgelegt ist, wird links basierend auf dem Container des absolut positionierten Elements und dem von Ihnen festgelegten positiven oder negativen Wert positioniert. Gleiches gilt für die anderen drei Attribute. Verwenden Sie „width“, um die Breite des Elements festzulegen, und „height“, um die Höhe des Elements festzulegen. Wenn der Rand positiv ist, bewegt sich das absolut positionierte Boxmodell in Richtung der Mitte seines Containers, und wenn er negativ ist, bewegt es sich von der Mitte weg. Ränder und Polsterungen verkleinern die innere Box einer absolut positionierten Box, die gestreckt ist. Das Muster des absolut positionierten Boxmodells ist wie folgt:

Dieses Gestaltungsmuster lässt sich auf alle Elemente anwenden.

1.6 Schwebendes Boxmodell

Verwenden Sie float:left oder float:right, um ein beliebiges Element schweben zu lassen. Auch schwebende Elemente weichen von der normalen Elementanordnungsreihenfolge ab und werden über den Rändern und Hintergründen benachbarter Blockelemente platziert. Dadurch wird das übergeordnete Element des schwebenden Elements verkleinert, sodass es vollständig verschwindet, wenn alle untergeordneten Elemente schweben. Auch wenn das schwebende Element nicht mit dem ursprünglichen Element ausgerichtet ist, führt dies dazu, dass der angrenzende Inhalt in der Zeile in eine bestimmte Richtung eingerückt wird. Durch Schweben nach links wird angrenzender Inhalt nach rechts eingerückt, während durch Schweben nach rechts der Inhalt nach links eingerückt wird. Schwebende Elemente werden vertikal an ihrer ursprünglichen Position positioniert. Innerhalb der Polsterung des übergeordneten Elements wird es horizontal von rechts oder links positioniert. Schwebende Elemente werden einzeln vertikal an ihrer ursprünglichen Position angeordnet. Wenn ein schwebendes Element nicht unmittelbar neben dem nächsten schwebenden Element liegen kann, wird es nach unten verschoben. Position, Größe, Polsterung, Rahmen und Ränder eines schwebenden Elements wirken sich alle auf die Position benachbarter schwebender Elemente und benachbarter Inline-Inhalte aus. Mit „Width“ und „Höhe“ werden die Breite und Höhe des schwebenden Elements festgelegt. Margin hat eine einzigartige Schwebefunktion. Positive Ränder verschieben das schwebende Element von seiner ursprünglichen Position weg und verschieben andere schwebende Elemente und Inline-Inhalte von ihm weg, während negative Ränder das Gegenteil bewirken. Rahmen und Polsterung vergrößern die äußere Boxgröße des schwebenden Elements. Der linke Rand und die linke Polsterung eines links schwebenden Elements schieben es nach rechts, während sein rechter Rand und seine rechte Polsterung andere schwebende Elemente und Inline-Inhalte weiter nach rechts schieben. Für rechtsschwebende Elemente gilt das Gegenteil. Das Floating-Box-Modell folgt diesem Muster:

Dieses Gestaltungsmuster lässt sich auf alle Elemente anwenden.

2. Das Positionierungsmodell erlernen

CSS bietet sechs Positionierungsmodelle zum Platzieren von Elementen: statisch, absolut, fest, relativ, schwebend und relativ schwebend. Das statische Positionierungsmodell kann Inline-, Inline-Block-, Block- und Tabellenbox-Modelle positionieren. Absolute und feste Positionierungsmodelle können absolute Boxmodelle positionieren. Das Float-Positionierungsmodell kann das Float-Box-Modell positionieren. Mit dem relativen Positionierungsmodell kann jedes beliebige Boxmodell relativ zum absoluten Boxmodell positioniert werden. Das Modell für die relative Float-Positionierung kann eine relative Positionierung auf dem Float-Box-Modell durchführen. Jedes Positionierungsmodell verwendet denselben grundlegenden Eigenschaftensatz zur Steuerung der Positionierung.

2.1 Statische Positionierung

Um die Elemente hintereinander in der Reihenfolge der Inline- und Blockelemente anzuordnen, können Sie „position: static“ auf die Elemente anwenden. Innerhalb eines Blockelements werden ein oder mehrere Block- oder Inline-Elemente vertikal nach unten analysiert. Innerhalb eines Inline-Elements werden Text und Objekte horizontal Zeile für Zeile analysiert. Die Startposition eines statischen Elements wird durch das vorherige statische Element bestimmt. Das Muster ist wie folgt:

Inline-statische Elemente:

Statische Elemente blockieren:

2.2 Absolute Positionierung

Mit absoluten Elementen können Sie ihre Position im Verhältnis zu ihrem nächstgelegenen Vorgänger präzise steuern. Absolute Elemente werden in der Positionierungsebene in der normalen Elementanordnungsreihenfolge analysiert, genau wie ein unabhängiges Boxmodell. Im Gegensatz zu schwebenden Elementen sind absolute Elemente nicht fließend. Sie können position:absolute verwenden, um jedes Element als absolutes Boxmodell zu analysieren. Verwenden Sie Breite und Höhe, um die Größe festzulegen. Die Prozentwerte beziehen sich auf die nächstgelegene positionierte Box, nicht auf das übergeordnete Element. Sie können links, rechts, unten und oben Werte zuweisen, um es auf einer Seite des nächstgelegenen Vorgängerelements zu platzieren. Mit dem Rand können Sie die Kanten eines Elements relativ zur Kante des nächstgelegenen Vorgängerelements versetzen. Verwenden Sie den Z-Index, um die Stapelreihenfolge der Elemente zu steuern. Elemente mit großen Z-Indexwerten werden näher am Benutzer positioniert. Das Muster ist wie folgt:

2.3 Feste Positionierung

Sie möchten ein Element aus seiner Positionierungsebene entfernen und es an einer bestimmten Stelle im Ansichtsfenster fixieren, oder Sie möchten, dass es an seiner ursprünglichen Position in der Reihenfolge der Elemente verbleibt. Sie möchten nicht, dass das Ansichtsfenster beim Scrollen fixiert bleibt. Dies wird als fest positioniertes Element oder einfach als festes Element bezeichnet. Sie können position:fixed verwenden, um jedes Element in ein Element mit fester Positionierung umzuwandeln. Feste Elemente werden relativ zum Ansichtsfenster und nicht relativ zum nächstgelegenen Vorgänger positioniert. Wenn Sie das Element also in seiner ursprünglichen Position in der Reihenfolge fixieren, bleibt es beim Scrollen des Ansichtsfensters an Ort und Stelle. Das Muster ist wie folgt:

2.4 Relative Positionierung

Um die Stapelreihenfolge der Elemente in ihren normalen Anordnungspositionen zu steuern, können Sie position:relative verwenden, um sie relativ zu positionieren. Die relative Positionierung eines Elements weicht nicht von der normalen Anordnungsposition des Elements ab und ändert auch nicht seine Form in der normalen Anordnungsposition. Wenn sich ein Inline-Element beispielsweise über mehrere Zeilen (eine oder mehr) erstreckt, behält es bei relativer Positionierung dieses eindeutige Layout bei. Sie können ein relativ positioniertes Element optional mit „links“ und „oben“ von seiner ursprünglichen Ausrichtungsposition verschieben. Weisen Sie jedem Element die Position „position:relative“ zu, damit absolute Nachfolgerelemente relativ dazu positioniert werden können. Das Muster ist wie folgt:

3: Erkunden und Lernen des Boxmodells

In CSS 2.1 können Elemente auf Blockebene nur rechteckig sein. Wenn wir die Gesamtgröße eines Blockelements berechnen müssen, müssen wir die Länge und Breite des Inhaltsbereichs sowie die Ränder, Polsterungen und Grenzen des Elements berücksichtigen. Das Boxmodell kann in das Standard-W3C-Boxmodell und das IE-Boxmodell unterteilt werden. Das Standard-W3C-Boxmodell sieht wie folgt aus:

Abbildung 1

Der Umfang dieses Boxmodells umfasst Ränder, Rahmen, Polsterung und Inhalt, und der Inhaltsteil umfasst keine anderen Teile. Das heißt, wenn wir die Breiten- und Höhenattribute eines Blockelements in CSS entwerfen, z. B. .box{width: 100px; height: 100px}, werden Breite und Höhe nur für den Inhaltsteil festgelegt, d. h. sie definieren die Länge des Bereichs zwischen Polsterung oben und Polsterung unten (die Breite des Bereichs zwischen Polsterung links und Polsterung rechts) in der obigen Abbildung. Anstatt der Summe aus Inhalt, Polsterung und Rahmen. Das IE-Boxmodell sieht wie folgt aus:

Abbildung 2

Der Umfang dieses Boxmodells umfasst Ränder, Rahmen, Polsterung und Inhalt. Der Unterschied zum Standard-W3C-Boxmodell besteht darin, dass der Inhaltsteil des IE-Boxmodells Rahmen und Polsterung umfasst. Das heißt, wenn wir die Breiten- und Höhenattribute eines Blockelements in CSS entwerfen, wie etwa .box{width: 100px; height: 100px}, sind Breite und Höhe die Summe aus Inhalt, Polsterung und Rahmen.

Bei statisch positionierten Elementen (d. h. ohne Positionierung) mit automatischer Breiteneinstellung und bei relativ positionierten Elementen wird die Breite berechnet, indem alle horizontalen Ränder, Polsterungen, Rahmen und Bildlaufleisten des Elements von der Breite des umgebenden Blocks abgezogen werden. Das heißt, subtrahieren Sie die Breite der horizontalen Ränder, der Polsterung, der Rahmen und der Bildlaufleiste (sofern vorhanden) des Elements von der Breite des umschließenden Blocks. Der verbleibende Wert ist der Wert. Zum Beispiel,

Hier ist für .test1 keine Positionseigenschaft festgelegt. Es handelt sich um die Standardposition: statisch. Der HTML-Code darunter lautet: <div class=”test1”>statische Positionierung oder relative Positionierung</div>. Das Ergebnis ist:

Abbildung 3

Das heißt, die Breite des Blocks wird automatisch erweitert, um die Breite seines übergeordneten Elements auszufüllen.

Bei schwebenden Elementen und absolut positionierten Elementen ist das genaue Gegenteil der Fall: Sie werden verkleinert, um ihrem Inhalt gerecht zu werden. Angenommen, die Datei .test1 im vorherigen Beispiel wird wie folgt umgeschrieben:

Das HTML bleibt unverändert, das Ergebnis lautet also:

Abbildung 4

In den Abbildungen 1 und 2 ist deutlich zu erkennen, dass in den Beispielen zur Berechnung der benötigten Flächengröße eines Elements die Ränder bereits mit einberechnet sind. Tatsächlich werden jedoch die benachbarten vertikalen Ränder nicht positionierter Elemente addiert und ergeben den Wert eines der Ränder mit der größeren Breite und nicht die Summe beider. Dies bedeutet, dass bei der Berechnung der tatsächlichen Größe der Fläche, die für ein Element erforderlich ist, nicht an der Kante des Randes begonnen wird, sondern nur der breiteste Rand berücksichtigt wird und schmalere Ränder über größere gestapelt werden. Wie in der folgenden Abbildung dargestellt:

Abbildung 5

Wenn die Breite eines Elements auf 100 % eingestellt ist (d. h. die Breite des Inhalts des übergeordneten Elements beträgt 100 %), sollte es außerdem keine Ränder, Polsterungen oder Grenzen haben, da dies nur dazu führen würde, dass der Bereich, in dem es platziert wird, mehr Platz benötigt. Dies wird von Designern oft übersehen und kann das Layout einer Seite ernsthaft stören, da es dazu führen kann, dass der Inhalt überläuft oder Elemente breiter werden als sie sein sollten. Zum Beispiel:

Der HTML-Code lautet: <div class="contain"><div class="box"></div></div>. Das Ergebnis ist wie folgt:

Das heißt, wenn weder Ränder noch Polsterungen vorhanden sind, kann der Inhalt das übergeordnete Element genau zu 100 % ausfüllen. Nehmen wir nun an, Sie ändern den Stil von .box wie folgt:

Wenn der Rest unverändert bleibt, lautet das Ergebnis:

An diesem Punkt sind die Elemente falsch ausgerichtet und nur der linke Rand wird angezeigt. Die Lösung besteht darin, in den meisten Fällen das Hinzufügen spezifischer Werte zur Breiteneigenschaft zu vermeiden und nur Ränder, Polsterungen und Rahmen anzuwenden.

IV. Zusammenfassung

Diese Woche habe ich hauptsächlich das Boxmodell und das Positionierungsmodell von HTML gelernt. Ich habe ein besseres Verständnis für die verschiedenen Attribute im Boxmodell und die Beziehungen zwischen ihnen gewonnen, was mir helfen wird, sie in zukünftigen Anwendungen gekonnt einzusetzen. Gleichzeitig haben wir auch die CSS-Analyse des Browsers weiter untersucht.