Eine kurze Analyse der Verwendung von Rahmen- und Anzeigeattributen in CSS
|
Einführung in Rahmeneigenschaften
Die Beschreibungstabelle der Attributwerte des Grenzlinientyps lautet wie folgt: |
| Eigenschaften | beschreiben |
|---|---|
| keiner | Definiert keine Grenze. |
| versteckt | Dasselbe wie „keine“. Die Ausnahme besteht bei der Anwendung auf Tabellen, bei denen „hidden“ zum Lösen von Randkonflikten verwendet wird. |
| gepunktet | Definiert einen gepunkteten Rahmen. Wird in den meisten Browsern als durchgezogene Linie dargestellt. |
| gestrichelt | Definiert eine gestrichelte Linie. Wird in den meisten Browsern als durchgezogene Linie dargestellt. |
| solide | Definiert eine durchgezogene Linie. |
| doppelt | Definiert eine Doppellinie. Die Breite der Doppellinie entspricht dem Wert der Rahmenbreite. |
| Rille | Definiert die 3D-Rillengrenze. Der Effekt hängt vom Wert der Rahmenfarbe ab. |
| Grat | Definiert eine dreidimensionale Gratgrenze. Der Effekt hängt vom Wert der Rahmenfarbe ab. |
| Einsatz | Definiert den 3D-Einfügungsrahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab. |
| Anfang | Definiert den 3D-Begrenzungsrahmen. Der Effekt hängt vom Wert der Rahmenfarbe ab. |
| erben | Gibt an, dass der Rahmenstil vom übergeordneten Element übernommen werden soll. |
Die Beschreibungstabelle der Attributwerte für die Grenzrichtung lautet wie folgt:
| Eigentum | beschreiben |
|---|---|
| Rand oben | Legt den oberen Rand eines Elements fest. |
| Rahmen unten | Legt die untere Grenze eines Elements fest. |
| Rand links | Legt den linken Rand eines Elements fest. |
| Grenze rechts | Legt den rechten Rand eines Elements fest. |
Grenzpraxis
Praxiscode:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Grenze</title>
<Stil>
.Kasten{
Breite: 200px;
Höhe: 100px;
Rand: 1px durchgehend rot;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
Lächeln ist der erste Glaube</div>
</body>
</html>Ergebnisdiagramm
Hinweis: Die Rahmenfarbe kann weggelassen werden und ist standardmäßig schwarz. Wenn die anderen beiden Eigenschaften nicht geschrieben werden, wird kein Rahmen angezeigt.
Festlegen der Elementrandrichtung – Praxis
Codeblöcke
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Grenze</title>
<Stil>
.Kasten{
Breite: 200px;
Höhe: 100px;
Rahmen oben: 2px doppelt rot;
Rahmen unten: 2px Grat Rasengrün;
Rahmen links: 2px Einschub dunkelorange;
Rahmen rechts: 2px Rille dunkelblau;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
Lächeln ist der erste Glaube</div>
</body>
</html>Ergebnisdiagramm
Einführung in Anzeigeeigenschaften
display Anzeigeattribut bedeutet Anzeige. display Anzeigeattribut kann Inline-Elemente in Blockebenenelemente und umgekehrt umwandeln, indem es versteckte Elemente auf den Anzeigestatus oder angezeigte Elemente auf den versteckten Status setzt.
In der folgenden Tabelle werden die display beschrieben:
| Eigenschaftswert | beschreiben |
|---|---|
| im Einklang | Konvertiert ein Element auf Blockebene in ein Inline-Element. |
| Block | Funktion: 1. Inline-Elemente in Elemente auf Blockebene konvertieren. 2. Setzen Sie die ausgeblendeten Elemente auf Anzeigestatus. |
| keiner | Setzt ein angezeigtes Element in den ausgeblendeten Zustand. |
Praxis der Anzeigeeigenschaft
Verwenden Sie display Anzeigeattribut mit dem Wert „ block , um die Breite und Höhe span Tags festzulegen und eine Hintergrundfarbe festzulegen.
Codeblöcke
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Span-Tags in Block-Level-Elemente umwandeln</title>
<Stil>
.Kasten{
Breite: 200px;
Höhe: 100px;
Anzeige: Block;
Hintergrundfarbe: rot;
}
</Stil>
</Kopf>
<Text>
<span class="box">Lächeln ist der erste Glaube</span>
</body>
</html>Ergebnisdiagramm
Hinweis: Wenn ein Inline-Element display: block; verwendet, hat es die Eigenschaften eines Blockelements.
Verwenden Sie display Anzeigeattribut mit dem Wert inline , um h1 Tag in ein Inline-Element umzuwandeln.
Codeblöcke
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>H1-Tags in Inline-Elemente umwandeln</title>
<Stil>
.Kasten{
Breite: 200px;
Höhe: 100px;
Anzeige: inline;
Hintergrundfarbe: rot;
}
</Stil>
</Kopf>
<Text>
<h1 class="box">Lächeln ist der erste Glaube</h1>
</body>
</html>Ergebnisdiagramm
Hinweis: Wenn ein Element auf Blockebene display: inline; verwendet, verfügt es über die Eigenschaften eines Inline-Elements.
Zusammenfassen
Oben ist die Methode zur Verwendung von Rahmen- und Anzeigeattributen in CSS, die ich Ihnen vorgestellt habe. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!
<<: Praxis der Realisierung der Breiten- und Höhenanpassung von Echarts-Diagrammen in Vue
>>: Ein Artikel, der Ihnen HTML beibringt
Artikel empfehlen
So verwenden Sie Docker zum lokalen Verpacken und Bereitstellen von Images
Erste Verwendung von Docker zum lokalen Verpacken...
Detaillierte Erklärung der Verwendung von Refs in den drei Hauptattributen von React
Inhaltsverzeichnis Klassenkomponente Funktionale ...
Spezifische Verwendung des Node.js-Paketmanagers npm
Inhaltsverzeichnis Zweck npm init und package.jso...
Nginx-Konfigurationsvorgang für den externen Netzwerkzugriff auf die Intranet-Site
Hintergrund: Die Site ist vom Front- und Back-End...
Fallstudie zu JavaScript Anti-Shake
Prinzip Das Prinzip von Anti-Shake ist: Du kannst...
Verwenden Sie nginx, um virtuelle Hosts auf Domänennamenbasis zu konfigurieren
1. Was ist ein virtueller Host? Virtuelle Hosts v...
Detaillierte Erläuterung der KVM-Bereitstellung von drei virtuellen Maschinen zur Implementierung des WordPress-Experiments
1. Einführung in KVM Die Abkürzung für Kernel-bas...
Implementierung der Docker-Container-Statuskonvertierung
Ein Zustandsübergangsdiagramm eines Docker-Contai...
JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal
Vorwort Beim Schreiben von Code stoßen wir gelege...
Zusammenfassung der Fallstricke beim Importieren von OVA-Dateien in VMware
Quelle des Problems Wie wir alle wissen, erzeugt ...
Verwenden von Apache ab zum Durchführen von HTTP-Leistungstests
Mac wird mit Apache-Umgebung geliefert Öffnen Sie...
In welchen Szenarien in JavaScript können Pfeilfunktionen nicht verwendet werden?
Inhaltsverzeichnis 1. Objektmethoden definieren 2...
So stellen Sie einzelne Tabellendaten mithilfe der vollständigen MySQL-Datenbanksicherungsdaten wieder her
Vorwort Beim Sichern der Datenbank wird eine voll...
Detaillierte Erläuterung häufiger Xshell-Probleme und zugehöriger Konfigurationen
Dieser Artikel stellt häufige Probleme von Xshell...
Der HTML 5-Entwurf wurde kein formeller Standard
<br />Gestern habe ich beim W3C gesehen, das...