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 griechische Buchstaben in HTML-Seiten
Griechische Buchstaben sind eine sehr häufig verw...
Detaillierte Methode zur Verwendung von GoAccess zum Analysieren von Nginx-Protokollen
Vor kurzem wollte ich Goaccess verwenden, um Ngin...
Benutzerdefinierter Bulletbox-Effekt von Vue (Bestätigungsfeld, Eingabeaufforderungsfeld)
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der Verwendung der neuen integrierten Komponenten von Vue
Inhaltsverzeichnis 1. Teleport 1.1 Einführung in ...
Grundlegende Befehle für MySQL-Datenbankoperationen
1. Erstellen Sie eine Datenbank: Daten erstellen ...
HTML-Seite unterstützt die Implementierung des Dunkelmodus
Seit 2019 verwenden sowohl Android- als auch iOS-...
Lösung für das Problem der Zeilenhöhe der Elementtabellenkopfzeile
Inhaltsverzeichnis Vorwort 1. Ursache des Problem...
Der Prozess der Installation von MySQL 8.0.26 auf CentOS7
1. Laden Sie zunächst die entsprechende Datenbank...
Adaptive Breitentabelle für HTML-Seiten
Auf den Seiten von Webanwendungen werden häufig T...
Detaillierte Untersuchung des MySQL-Verbundindex
Ein zusammengesetzter Index (auch gemeinsamer Ind...
Detaillierte Erläuterung der Schreibreihenfolge und Ausführungsreihenfolge von SQL-Abfrageanweisungen der MySQL-Reihe
Inhaltsverzeichnis 1. Die Schreibreihenfolge eine...
border-radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen
border-radius:10px; /* Alle Ecken sind mit einem ...
js, um einen simulierten Einkaufszentrumsfall zu erreichen
Freunde, die HTML-, CSS- und JS-Frontend lernen, ...
Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL
Einzeilige Funktionen vom Datumstyp in MySQL: CUR...
Detaillierte Erklärung der Verwendung von zwei Arten von temporären Tabellen in MySQL
Externe temporäre Tabellen Eine mit CREATE TEMPOR...