******* Allgemeine CSS-Eigenschaften *********
[margin]
margin Den erweiterten Rand an den vier Seiten des Objekts abrufen oder festlegen
margin-top Den erweiterten Rand an der Oberkante des Objekts abrufen oder festlegen
margin-right Abrufen oder festlegen der erweiterte Rand auf der rechten Seite des Objekts
margin-bottom Den erweiterten Rand der unteren Kante des Objekts abrufen oder festlegen
margin-left Den erweiterten Rand der linken Seite abrufen oder festlegen Seite des Objekts
argin: Ruft die äußeren Ränder der vier Seiten des Objekts ab oder legt sie fest.
Wenn alle vier Parameterwerte angegeben sind, werden sie auf die vier Seiten in der Reihenfolge oben, rechts, unten und links angewendet.
Wenn nur einer angegeben ist, wird dieser für alle vier Seiten verwendet.
Wenn zwei vorhanden sind, ist das erste für oben und unten und das zweite für links und rechts.
Wenn drei vorhanden sind, ist das erste für oben, das zweite für links und rechts und das dritte für unten.
Inline-Objekte können dieses Attribut verwenden, um die äußeren Patches auf der linken und rechten Seite festzulegen. Wenn Sie die äußeren Patches auf der oberen und unteren Seite festlegen möchten, müssen Sie das Objekt zunächst als Blockebene oder festlegen Inline-Blockebene.
Erweiterte Ränder sind immer transparent.
Einige benachbarte Ränder werden zusammengeführt, was wir Randfaltung nennen:
Allgemeines Verständnis der Randfaltung:
Randfaltung tritt nur auf Blockebene auf Elemente;
Der Rand eines schwebenden Elements kollabiert nicht mit einem Rand.
Ein Element auf Blockebene, für das das Attribut „Überlauf“ festgelegt ist und dessen Wert nicht sichtbar ist, überschneidet sich nicht mit seinen untergeordneten Elementen . Der Rand des Elements wird reduziert.
Der Rand des absolut positionierten Elements wird mit keinem anderen Rand reduziert 🎜>
auto: Der Wert wird auf den Wert der gegenüberliegenden Kante gesetzt
: Verwenden Sie den Längenwert, um die äußere Polsterung zu definieren. Kann negativ sein
: Verwenden Sie den Prozentsatz, um den externen Abstand zu definieren. Kann negativ sein
------------------------------------------------ - -------------------------------------------------
******************************************* * *************************************************** ** *********************
【Polsterung】
padding Search Oder legen Sie die interne Polsterung an den vier Seiten des Objekts fest
padding-top Rufen Sie die interne Polsterung an der Oberkante des Objekts ab oder legen Sie sie fest
padding-right Rufen Sie die interne Polsterung ab oder legen Sie sie fest Polsterung auf der rechten Seite des Objekts
padding-bottom Rufen Sie die Innenpolsterung der Unterkante des Objekts ab oder legen Sie sie fest
padding-left Rufen Sie die Innenpolsterung der linken Seite von ab oder legen Sie sie fest das Objekt
padding: Innenränder des Objekts auf allen vier Seiten abrufen oder festlegen.
Wenn alle vier Parameterwerte angegeben sind, werden sie auf die vier Seiten in der Reihenfolge oben, rechts, unten und links angewendet.
Wenn nur einer angegeben ist, wird dieser für alle vier Seiten verwendet.
Wenn zwei vorhanden sind, ist das erste für oben und unten und das zweite für links und rechts.
Wenn drei vorhanden sind, ist das erste für oben, das zweite für links und rechts und das dritte für unten.
Inline-Objekte können dieses Attribut verwenden, um die inneren Patches auf der linken und rechten Seite festzulegen. Wenn Sie die inneren Patches auf der oberen und unteren Seite festlegen möchten, müssen Sie das Objekt zunächst als Blockebene oder festlegen Inline-Blockebene.
: Verwenden Sie den Längenwert, um die Innenpolsterung zu definieren. Negative Werte sind nicht zulässig
: Verwenden Sie den Prozentsatz, um die Innenpolsterung zu definieren. Negative Werte sind nicht erlaubt
------------------------------ --- -----------
********* *** ********************************************** **** *****************************************
[text]
text-transform Die Groß-/Kleinschreibung des Textes im Objekt abrufen oder festlegen
white-space Festlegen oder abrufen die Verarbeitung von Leerzeichen innerhalb des Objekts. Methode
tab-size. Abrufen oder Festlegen der Länge des Tabulatorzeichens im Objekt.
word-wrap. Festlegen oder Abrufen, ob Zeilen umgebrochen werden sollen, wenn der Inhalt die überschreitet Grenzen des angegebenen Containers
word -Bream-Einstellungen oder abgerufene Objekte im Text im Text
Text-Align Legt die Inhaltsebene im Abrufobjekt fest oder ruft sie ab
Text-Align-Last-Einstellungen oder Abrufen eines Blocks in einem Block Die letzte Zeile (einschließlich des Falls, in dem es nur eine Textzeile im Block gibt, die sowohl die erste als auch die letzte Zeile ist)
Ausrichtung der zwangsweise unterbrochenen Zeile
text-justify Die Ausrichtung abrufen, die zum Anpassen des Texts innerhalb des Objekts verwendet wird
Wortabstand 🎜>
text-indent Den Einzug des Textes im Objekt abrufen oder festlegen
vertical-align Die vertikale Ausrichtung des Objektinhalts festlegen oder abrufen
line-height Rufen Sie die Objektzeilenhöhe ab oder legen Sie sie fest. Das heißt, der Abstand zwischen der Unterseite der Schrift und der Oberseite der Innenseite der Schrift
------------------ ------- -----------
letter-spacing: Abrufen oder legen Sie den Abstand zwischen den Zeichen im Objekt fest. Minimale, maximale und optimale Lücken.
Dieses Attribut fügt den angegebenen Abstand nach jedem Buchstaben hinzu (einschließlich jedes Buchstabens innerhalb eines Wortes);
Buchstabenabstand kann nicht auf den Anfang und das Ende einer Zeile angewendet werden ;
normal: Standardintervall
: Geben Sie das Intervall mit einem Längenwert an. Kann negativ sein.
: Geben Sie das Intervall in Prozent an. Kann negativ sein.
-------------------------------------- --- --------------
line-height: Abrufen oder Legen Sie die Zeilenhöhe des Objekts fest. Das ist der Abstand zwischen dem unteren Rand der Schrift und dem oberen Rand der Innenseite der Schrift.
Standardwert: normal
normal: Inhalt darf die angegebenen Containergrenzen überschreiten oder überschreiten.
: Verwenden Sie den Längenwert, um die Zeilenhöhe anzugeben. Kann negativ sein.
: Geben Sie die Zeilenhöhe als Prozentsatz an. Der Prozentwert basiert auf der Höhengröße der Schriftart. Kann negativ sein.
: Geben Sie die Zeilenhöhe mithilfe eines Multiplikationsfaktors an. Kann negativ sein.
-------------------------------------- --- ---------
text-align: Legt die horizontale Ausrichtung des fest oder ruft sie ab Inhalt im Objekt.
Der Text des Elements auf Blockebene besteht aus einigen gestapelten Wireframes
Um die Ausrichtung von Text-Align wirksam zu machen, müssen Sie Leerzeichen zwischen chinesischen Zeichen einfügen, z. B. Leerzeichen ;
Die letzte Textzeile im Block (einschließlich des Falles, in dem es nur eine Textzeile im Block gibt, in diesem Fall ist es sowohl die erste als auch die letzte Zeile) und die Zeile, die zwangsweise unterbrochen wird , Sie müssen Text verwenden, um beide Enden auszurichten -align-last; Wenn text-align-last im IE-Browser wirksam werden soll, muss text-align als justify definiert werden >Der Ausrichtungseffekt beider Enden einer einzelnen Zeile wird relativ einfach:
li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align -last:justify;}
li:after {display:inline-block;overflow:hidden;width:100%;height:0;content:'';}
links: Der Inhalt ist linksbündig.
Mitte: Richten Sie den Inhalt zentriert aus.
rechts: Der Inhalt ist rechtsbündig.
Begründen: Begründen Sie den Inhalt an beiden Enden.
Start: Startgrenze der Inhaltsausrichtung. (CSS3)
end: Endgrenze der Inhaltsausrichtung. (CSS3)
: Die Zeichenfolge muss ein einzelnes Zeichen sein, sonst ist die Deklaration ungültig. (CSS3)
match-parent: Dieser Wert verhält sich genauso wie inherit, außer dass das von diesem Wert geerbte Start- oder Endschlüsselwort anhand des Richtungswerts des übergeordneten Elements berechnet wird. Die berechneten Werte können links und rechts sein . (CSS3)
start end: Geben Sie „start“ an, um die erste Zeile und alle erzwungenen unterbrochenen Zeilen „end“ auszurichten, um alle verbleibenden Zeilen auszurichten; diese werden von „text-align-last“ nicht beeinflusst.
+++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++
Ein paar Punkte, die Sie beachten sollten:
Alle gängigen Browser unterstützen das justify-Attribut von text-align Value;
text-align verarbeitet weder erzwungene Unterbrechungszeilen noch die letzte Zeile innerhalb eines Blocks. Mit anderen Worten, wenn der Block nur eine Textzeile enthält (dies Zeile ist sowohl die eine Zeile als auch die letzte Zeile), dann kann nur das Festlegen von text-align:justify nicht beide Enden der Zeile ausrichten.
text-align-last wird zur Verarbeitung verwendet die letzte Zeile im Block und zwangsweise unterbrochene Zeilen. Wenn Sie also die Ausrichtung einer einzelnen Textzeile an beiden Enden festlegen möchten, müssen Sie
Nicht-Firefox-Browser müssen die Ausrichtung an beiden Enden ermöglichen. Zwischen den Texten müssen Leerzeichen eingefügt werden (wenn eine Zeile nur zwei chinesische Zeichen enthält, muss Firefox auch Leerzeichen dazwischen einfügen).
Chrome23, Safari5.1.7, Opera12.5 wird Text-align-last noch nicht unterstützt
Gemäß den oben genannten Punkten, um eine Ausrichtung an beiden Enden einer einzelnen Zeile zu erreichen , Sie können in zwei Richtungen gehen:
Da alle Browser dies unterstützen. Der justify-Attributwert von text-align unterstützt text-align-last nicht vollständig. Wir können Pseudoobjekte zum Generieren verwenden Zusätzlicher Inhalt für Nicht-IE- und IE7-Browser (und niedrigere Browser unterstützen keine Pseudoobjekte, verwenden Sie die letzte Textausrichtung), platzieren Sie ihn in der zweiten Zeile und verbergen Sie ihn zu diesem Zeitpunkt in der ersten Textzeile (d. h. die einzelne auszurichtende Textzeile) kann mit text-align:justify
ausgerichtet werden
Browser, die text-align-last unterstützen, wie IE und Firefox, verwenden text-align-last.
Verwenden Sie also je nach aktueller Situation Die erste Lösung ist relativ einfach und kann problemlos mit IE5.5-10, Firefox, Chrome, Safari, Opera
++++++++++++ + kompatibel sein ++++++++++++++++++++++++++++++++++++++++++++++++++ +++ ++++++++++++++++++++++++++++++++++++++++++++++++
text-align-last: Legt die letzte Zeile in einem Block fest oder ruft sie ab (einschließlich des Falls, in dem der Block nur eine Textzeile enthält, in diesem Fall handelt es sich sowohl um die erste als auch um die letzte Zeile)
oder die Ausrichtung der zwangsweise unterbrochenen Linien
> Wenn eine Zeile auch die erste Zeile im Block oder die erste Zeile ist, auf die jedoch ein erzwungener Zeilenumbruch folgt, es sei denn Es wird angezeigt: Geben Sie die Ausrichtung der ersten Zeile für die Textausrichtung an (Wert „Start und Ende“). Andernfalls überschreibt text-align-last die Ausrichtung von text-align.
Wenn der Wert „Auto“ angegeben ist, basiert die Inhaltsausrichtung auf; text-align-Einstellung, es sei denn, text-align ist auf justify eingestellt;
Als eines der privaten Attribute des IE implementierte IE5.5 als erstes text-align-last, das später von als Standardattribut übernommen wurde w3c;
Browser IE7 und niedriger implementieren nur die Ausrichtung der letzten Zeile im Block und verarbeiten nicht die Ausrichtung zwangsweise unterbrochener Zeilen. Ab IE8 werden beide Formen der Zeilenausrichtung unterstützt
Wenn text-align-last im IE-Browser wirksam werden soll, muss text-align zunächst als justify definiert werden.
auto: Keine spezielle Ausrichtung.
links: Der Inhalt ist linksbündig.
Mitte: Richten Sie den Inhalt zentriert aus.
rechts: Der Inhalt ist rechtsbündig.
Begründen: Begründen Sie den Inhalt an beiden Enden.
Start: Startgrenze der Inhaltsausrichtung.
Ende: Endgrenze der Inhaltsausrichtung.
-------------------------------------- --- ----------
text-indent: Den Einzug des Textes im Objekt abrufen oder festlegen.
Um dieses Attribut für ein Inline-Objekt zu verwenden, müssen Sie das Objekt zunächst als Blockebene oder Inline-Blockebene anzeigen lassen.
Die hängenden und every-line-Schlüsselwörter folgen dem Einrückungswert
div{text-indent:2em every-line;}
: Verwenden Sie den Längenwert, um die Einrückung des Textes anzugeben. Kann negativ sein.
: Gibt die Einrückung des Textes in Prozent an. Kann negativ sein.
jede Zeile: Definieren Sie die Einrückung, die auf die erste Zeile des Blockcontainers angewendet werden soll, oder die erste Zeile jedes erzwungenen Zeilenumbruchs darin ist nicht betroffen. (CSS3)
hängend: Alle eingerückten Zeilen umkehren.
-------------------------------------- --- -------------------------------- --- ----------
text-transform: Die Groß-/Kleinschreibung von Text im Objekt abrufen oder festlegen.
keine: Keine Konvertierung
Großschreibung: Wandeln Sie den ersten Buchstaben jedes Wortes in Großbuchstaben um
Großbuchstaben: Wandeln Sie jedes Wort in Großbuchstaben um
Kleinbuchstaben: Konvertieren Sie jedes Wort in Kleinbuchstaben.
Volle Breite: Konvertieren Sie alle Zeichen in die volle Breite. Wenn ein Zeichen keine entsprechende Form mit voller Breite hat, bleibt es intakt. Dieser Wert wird häufig zum Setzen ideografischer Symbole wie lateinischer Zeichen und Zahlen verwendet.
-------------------------------------- --- -------------------------------- --- -------------------
vertikal-align: Legt die vertikale Ausrichtung von Inline-Elementen innerhalb der Zeilenbox fest oder ruft sie ab .
Grundlinie: Richten Sie den Inhalt eines Objekts, das die Valign-Funktion unterstützt, an der Grundlinie aus.
Sub: Richten Sie den Index des Textes vertikal aus.
Super : Richten Sie den Text vertikal aus. Hochgestellt
top: Richten Sie den Inhalt des Objekts, das die Valign-Funktion unterstützt, am oberen Rand des Objekts aus.
text-top: Richten Sie den Text des Objekts aus, das die unterstützt Valign-Funktion an der Oberseite des Objekts
Mitte: Richten Sie den Inhalt des Objekts aus, das die Valign-Funktion unterstützt, an der Mitte des Objekts
unten: Richten Sie den Text des Objekts aus, das die unterstützt Valign-Funktion am unteren Rand des Objekts
text-bottom: Unterstützt die Valign-Funktion. Richtet den Text des Objekts am oberen Rand des Objekts aus
: Geben Sie den Versatz von der Grundlinie in Prozent an. Kann negativ sein. Der Basiswert für Prozentsätze ist 0 %.
: Verwenden Sie den Längenwert, um den Versatz von der Grundlinie anzugeben. Kann negativ sein. Die Basislinie ist 0 für numerische Werte.
-------------------------------------- --- -------------------------------- --- ------------
Wortumbruch: Legen Sie das Wortumbruchverhalten des Texts innerhalb des Objekts fest oder rufen Sie es ab.
Um zu verhindern, dass fortlaufende bedeutungslose lange Zeichen auf der Seite das Layout unterbrechen, sollte Break-All verwendet werden.
Als eines der privaten Attribute von IE, IE5.5 Es war das erste, das den Wortumbruch implementierte, der später von w3c als Standardattribut übernommen wurde.
normal: Gemäß den Textregeln asiatischer Sprachen In nicht-asiatischen Sprachen sind Zeilenumbrüche innerhalb von Wörtern zulässig.
keep-all: Dasselbe wie üblich für alle nicht-asiatischen Sprachen. Für Chinesisch, Koreanisch und Japanisch sind Wortumbrüche nicht zulässig. Geeignet für nicht-asiatischen Text, der eine kleine Menge asiatischen Text enthält.
Break-All: Dieses Verhalten ist das gleiche wie bei asiatischen Sprachen üblich. Pausen innerhalb eines beliebigen Wortes einer Textzeile in einer nicht-asiatischen Sprache sind ebenfalls zulässig. Dieser Wert eignet sich für asiatischen Text, der nicht-asiatischen Text enthält, z. B. das Umbrechen aufeinanderfolgender englischer Buchstaben.
---------------- ------ ---------------
Zeilenumbruch: Legen Sie fest oder rufen Sie ab, ob Zeilen umgebrochen werden sollen, wenn der Inhalt die Grenzen überschreitet des angegebenen Containers.
normal: Ermöglicht, dass Inhalte die angegebenen Containergrenzen überschreiten oder überschreiten.
Break-Wort: Der Inhalt wird innerhalb der Grenzen unterbrochen. Bei Bedarf sind Zeilenumbrüche innerhalb von Wörtern zulässig.
-------------------------------------- --- -------------
Das Obige ist der Inhalt einer Zusammenfassung der drei gängigen CSS-Eigenschaften. Bitte achten Sie auf weitere verwandte Inhalte auf der chinesischen PHP-Website (www.php.cn)!
