Eine Erklärung des CSS3-Layouts und -Schriftsatzes

Prämisse

Bevor wir Layout und Satz einführen, führen wir zunächst eine Größeneinheit ein, die in CSS3 neu eingeführt wurde rem, alle Verweise auf rem Die definierten Schriftgrößen sind relativ zur Größe des Stammelementtextes. Im Vergleich zur Verwendung von em erspart uns diese Methode den mühsamen Prozess der manuellen Berechnung der Schriftgröße.

Effekt 1

demo01.png

Solange wir die neuen Attribute von CSS3 verwenden, können wir einen solchen Effekt problemlos erzeugen. Im Folgenden erläutern wir einige der wichtigsten verwendeten Attribute.

• Spaltenbreite: Wird verwendet, um die Breite der Spalte anzugeben. Sobald ein Wert angegeben ist, entscheidet der Browser dynamisch, den Inhalt basierend darauf in Abschnitte zu unterteilen die Breite des aktuellen Browsers für wie viele Spalten.

• Spaltenregel: Dieses Attribut ist eine Abkürzung. Tatsächlich enthält es drei verschiedene Attribute, nämlich Spaltenregelbreite, Column-Rule-Style, Column-Rule-Color, was sie jedenfalls erreichen, ist, eine Trennlinie zwischen den Spalten hinzuzufügen, was mit der Einstellung des Rahmenattributs identisch ist.

• Column-Gap: Wird verwendet, um das Lückenattribut der Spalte festzulegen. Dieser Wert wird gleichmäßig auf beide Seiten der Spalte aufgeteilt.

Wenn wir Spalten implementieren möchten, können wir Column-Width oder Column-Count verwenden Attribut, aber wir machen das normalerweise nicht, weil es bedeutet, dass der Inhalt unabhängig von der Breite des aktuellen Browsers in drei Spalten aufgeteilt werden muss, was ein sehr unfreundliches Design ist.

Nachdem Sie die oben genannten Attribute kennen, können Sie meiner Meinung nach den Effekt in unserem Diagramm schnell erkennen. Wir werden den Quellcode hier nicht einfügen, Sie können hier klicken, um ihn herunterzuladen . Was hier erwähnt werden muss, ist, dass wir auf der Seite einige gut aussehende Schriftarten zitiert haben. Wenn Sie diese auch verwenden möchten, müssen Sie nur die folgende Codezeile unter Ihrem Tag einfügen.

<link href=&#39;http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>

Effekt 2

demo02.png

Um diesen Effekt zu erzielen, erläutern wir im Folgenden die verschiedenen verwendeten Eigenschaften.

• 　Anzeige: Wenn wir das Flexbox-Layout verwenden möchten, müssen wir zuerst den Wert dieser Eigenschaft auf „Flex“ setzen.

• Flex-Flow: Diese Eigenschaft ist eigentlich die Abkürzung für zwei Eigenschaften, von denen eine Flex-Richtung ist und zum Festlegen der Richtung der Hauptachse verwendet wird. wenn es auf row eingestellt ist Dann ist die horizontale Richtung die Hauptachse, und wenn es sich um eine Spalte handelt, ist die vertikale Richtung die Hauptachse. Ein weiteres Attribut ist Flex-Wrap, Wird zum Festlegen des Elementumbruchs verwendet, wenn das Element die Breite des übergeordneten Elements überschreitet. Dadurch kann der Effekt einer Anpassung an den Bildschirm erzielt werden.

• 　Flex: Diese Eigenschaft wird normalerweise festgelegt, wenn die Anzeige auf Flex eingestellt ist Im untergeordneten Element sind drei Parameter festgelegt. Ich werde sie hier nicht im Detail erklären, da ich die Sprache nicht organisieren kann, um sie zu erklären. Sie können die Verwendung dieses Attributs auf Baidu überprüfen.

Das obige ist der detaillierte Inhalt vonEine Erklärung des CSS3-Layouts und -Schriftsatzes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!