Die Verwendung des prozentualen Breitenlayouts im CSS-Layout

Wie verwende ich das Prozentlayout? In diesem Artikel wird Ihnen die Verwendung des prozentualen Breitenlayouts im CSS-Layout vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Wie hoch ist der Prozentsatz? Wie richtet man es ein?

Prozentsatz ist eine Maßeinheit relativ zum enthaltenden Block.

Berechnung der prozentualen Breite: Zielelementbreite/Breite des übergeordneten Elements = prozentuale Breite

Es ist sehr nützlich für Bilder: Wie folgt erkennen wir, dass die Breite des Bildes immer 50 % der Breite beträgt Breite des Containers. Sie können es ausführen und die Seitengröße ändern, um den Effekt zu sehen!

Sie können auch gleichzeitig „Min-Breite“ und „Max-Breite“ verwenden, um das maximale oder minimale Breitenverhältnis des Bildes zu begrenzen!

Prozentbreites Layout

Schauen wir uns ein Beispiel für ein prozentuales Breitenlayout an:

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

Wann parent Die Breite des Containers beträgt: 800px

Wenn die Breite des übergeordneten Containers beträgt: 500px

Breite Nach dem Festlegen des Prozentsatzes ändern sich die Navigations- und Abschnitts-Tags, wenn sich die Breite des übergeordneten Containers ändert.

Werfen wir einen Blick auf die Prozenteinstellungen häufig verwendeter Attribute im CSS-Layout

Erklärung: Prozentuales Layout erfordert

1. Unterteilen Sie zunächst die gesamte Seite in Blöcke und nehmen Sie den entsprechenden Prozentsatz für die Breite jedes Moduls.

2. Wenn Sie die Breite des Inhaltsbereichs und den Abstand zwischen den Bereichen definieren, d. h. den für jedes Boxmodell sichtbaren Abstand, müssen Sie einen Prozentsatz verwenden und dürfen keine feste Breite verwenden . Sogar margin-left margin-right muss Prozentsätze verwenden!

3. Versuchen Sie beim prozentualen Layout, so weit wie möglich von großen Blöcken zu kleinen Blöcken zu wechseln, unabhängig von den spezifischen Inhaltseinheiten, und verwenden Sie Prozentsätze für diese Blöcke. (Inhaltsentitäten, also Inhaltstext, Bilder, Symbole usw., die angezeigt werden. Blöcke, kein Inhalt.)

Layout in Prozent der Breite Aufgetretene Probleme:

Prozent-Layout, das Fensterverhältnis wird auf 50 % reduziert und die Seite wird durcheinander gebracht. Bei Prozentlayouts gibt es beim Vergrößern oft kein Problem, beim Verkleinern hingegen ein Problem. Es wird empfohlen, für die Entwicklung einen kleineren Computerbildschirm zu wählen. Sollte der Bildschirm zu groß sein, kann das Fenster je nach Situation auf etwa 15 Zoll skaliert werden.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonDie Verwendung des prozentualen Breitenlayouts im CSS-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!