Einführung in die Kenntnisse der visuellen Darstellungstheorie

Endlich weiß ich, wie man eine visuelle Darstellung umsetzt, anstatt sie einzeln umzusetzen. Es scheint, dass ich die Dinge hinter der Darstellung gelernt habe.

Das Folgende ist das Brüllen eines weiblichen Mannes, der plötzlich merkt, dass er so wenig gesehen hat

Ahhh, mir ist gerade aufgefallen, dass die Breite auf die Breite des Inhaltsbereichs eingestellt ist. nach dem Hinzufügen von Polsterung oder Rand wird die Gesamtbreite erhöht

Ahhhhh, ich habe heute gerade erfahren, dass nur der Inhaltsbereich sowie der linke und rechte Rand auf „Automatisch“ eingestellt werden können! ! ! !

1 Verwandte Begriffe

• Fluss: Wenn die Seite angezeigt wird, fließen die Elemente auf den Bildschirm Durch einen Bruch aus der Strömung gibt es natürlich auch Fälle. Wenn ein Element schwebend oder positioniert ist, wird es vom Fluss getrennt

• Nicht ersetzte Elemente: wie zum Beispiel wieder Absätze Am Beispiel besser

• Ersatzelemente: wie Bilder

• Elemente auf Blockebene: Absätze, Titel, p usw., eine Zeile Nach dem Zufluss wird eine Pause erzeugt. Die Verwendung von display: block; ermöglicht es Elementen, Boxen auf Blockebene

• Inline-Elemente zu generieren: strong, span usw., die nicht umbrochen werden. Verwenden Sie display: inline;, damit das Element eine Box generiert

• Stammelement: html
  

2 auto

2.1 Horizontal: Nur die Breite des Inhaltsbereichs sowie der linke und rechte Rand können auf „Automatisch“ eingestellt werden

• Ein Auto: Nimmt den gesamten verbleibenden Platz ein

• Zwei Autos: Im Allgemeinen ist es der äußere Rand, dann wird der Inhaltsbereich zentriert

• Drei Autos: Der Rand ist 0, der Inhaltsbereich versucht, den größtmöglichen Platz einzunehmen

2.2 Vertikal: Nur die Höhe des Inhaltsbereichs sowie der obere und untere Rand können auf automatisch eingestellt werden

• Im normalen Fluss der obere und untere Ränder, die auf „Auto“ eingestellt sind, werden automatisch auf 0 berechnet, nicht wie horizontale Ränder
  

3 Rand

Zwischen Innenabstand, Rand und Rand, nur der Rand kann auf einen negativen Wert eingestellt werden, und es sollte beachtet werden, dass

margin Wenn Sie ihn auf einen negativen Wert festlegen, ist es sehr wichtig sicherzustellen, dass die Summe aus Innenabstand + Rand + Rand die Breite des Rands darstellt übergeordnetes Element .

Stimmt, das wusste ich vorher nicht ... Wer weiß, warum ich so viele wichtige Wissenspunkte verpasst habe ... Zum Glück habe ich das jetzt dank des maßgeblichen Leitfadens nachgeholt ~ ~

4 Rollentransformation anzeigen

• Möchten Sie das Listenelement als horizontale Leiste, getrennt durch vertikale Linien, als Navigationsleiste verwenden

• display: inline;

Fügen Sie dann allen Listenelementen einen rechten Rand und dem ersten Listenelement einen linken Rand hinzu

• Fügen Sie den Link ein p und möchten es als vertikale Seitenleiste anordnen

  display: block;

Fügen Sie einige Stile hinzu, um es als schöne vertikale Navigationsleiste anzuzeigen

• Wenn Sie eine Blockstruktur in eine Zeile einfügen möchten

  display: inline-block;

, wird etwas, das wie eine vertikale Navigationsleiste aussieht, in die Zeile eingefügt. Wenn für diesen Block keine Breite festgelegt ist, passt sich einer Zeile an

• Einlauf

  display: run-in;

Natürlich gibt es Einschränkungen bei der Verwendung, nur die folgenden Wenn an Da es sich bei dem Element um ein Element auf Blockebene handelt, wird es am Anfang dieses Elements auf Blockebene in das Inline-Element konvertiert.

Das obige ist der detaillierte Inhalt vonEinführung in die Kenntnisse der visuellen Darstellungstheorie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!