CSS-Praxis-Tutorial (3)

Zwölf. Den Stil von BOX steuern

Das Stylesheet gibt einen Container BOX an, in dem alle bedienbaren Stile eines Objekts gespeichert werden. Es umfasst vier Aspekte: das Objekt selbst, den Randbereich, den Objektrand und die Objektlücke.



Damit jeder die Bedeutung dieser Attribute und die Beziehung zwischen ihnen besser verstehen kann, schauen Sie sich bitte das folgende Diagramm an:

1. Randleer (MARGIN)

Wie in der Abbildung gezeigt, befindet es sich auf der äußersten Ebene des BOX-Modells und umfasst vier Attribute.

Die Formate sind wie folgt:

·margin-top: oberer Randabstand

·margin-right: rechter Randabstand

·margin-bottom : Abstand des unteren Randes

·margin-left: Abstand des linken Randes

Der Abstand des Randes kann als Zahl mit einer Längeneinheit ausgedrückt werden.

Wenn Sie margin verwenden, eine vereinfachte Methode der oben genannten Attribute, können Sie vier aufeinanderfolgende Zahlen mit Längeneinheiten hinzufügen, um jeweils „margin-top“, „margin-right“, „margin-bottom“ und „margin-left“ darzustellen Zahlen müssen durch Leerzeichen getrennt werden.

2． Objektrand (BORDER)

Wie in der Abbildung gezeigt, befindet er sich zwischen dem Randrohling und der Objektlücke und umfasst sieben Attribute.

Die Formate sind wie folgt:

·border-top: obere Randbreite

·border-right: rechte Randbreite

·border-bottom : untere Randbreite

·border-left: linke Randbreite

·border-width: alle Randbreiten

·border-color: Randfarbe

· border-style: Parameter für den Rahmenstil

Darunter kann border-width die Breite aller Ränder gleichzeitig festlegen, während border-color die Farbe der vier Ränder gleichzeitig festlegt, können Sie schreiben Markieren Sie vier Farben fortlaufend und trennen Sie sie durch Leerzeichen. Die oben erwähnten kontinuierlich festgelegten Grenzen haben die Reihenfolge „Rand oben“, „Rand rechts“, „Rand unten“ und „Rand links“.

Border-style ist etwas komplizierter als andere Attribute, da es auch mehrere Parameter für den Rahmenstil enthält:

·none: kein Rand.

·gepunktet: Der Rand ist eine gepunktete Linie.

·gestrichelt: Die Grenze ist eine lange und kurze Linie.

·durchgezogen: Der Rand ist eine durchgezogene Linie.

·double: Der Rand ist eine doppelte Linie.

·Groove: 3D-Ränder mit unterschiedlichen Effekten je nach Farbattribut anzeigen

·Ridge: 3D-Ränder mit unterschiedlichen Effekten je nach Farbattribut anzeigen

·Einsatz: Anzeige unterschiedliche Effekte je nach Farbattribut Effekt 3D-Rand

·Anfang: 3D-Rand mit unterschiedlichen Effekten je nach Farbattribut anzeigen

3. Objektlücke (PADDING)

Wie in der Abbildung gezeigt, befindet sie sich zwischen dem Objektrand und dem Objekt und enthält vier Attribute.

Das Grundformat ist wie folgt:

·padding-top: obere Lücke

·padding-right: rechte Lücke

·padding-bottom: untere Lücke

·padding-left: linke Lücke

Ähnlich wie MARGIN kann PADDING auch Polsterung verwenden, um alle Objektlücken auf einmal festzulegen. Das Format ähnelt auch MARGIN, daher werde ich es nicht tun Listen Sie sie einzeln auf.
Dreizehn． Stil der Anzeigesteuerung

Das Grundformat ist wie folgt:

Anzeige: Parameter

Parameterwertebereich:

·Block (Standard): Zeilenumbrüche davor und nach dem Objekt

·inline: keine Zeilenumbrüche vor und nach dem Objekt

·list-item: Zeilenumbrüche vor und nach dem Objekt, Aufzählungszeichen hinzugefügt

·keine : keine Anzeige

Vierzehn． Das Grundformat des Whitespace-Kontrollstils

lautet wie folgt:

Das Whitespace-Attribut bestimmt, wie mit Leerzeichen innerhalb des Elements umgegangen wird.

white-space: Parameter

Wertebereich des Parameters:

normal: Ersetzen Sie mehrere Leerzeichen durch eines, um

PRe: Drücken Sie sorgfältig. Die Eingabe zeigt Leerzeichen
nowrap: Zeilenumbrüche deaktivieren

Es sollte jedoch beachtet werden, dass der Schreibbereich auch ein Attribut auf Blockebene ist.

. Der vollständige Text ist vorbei

Der Inhalt des CSS-Praxis-Tutorials (3) finden Sie auf der chinesischen PHP-Website (www.php). cn)!