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
Detaillierte Analyse der langsamen MySQL-Protokollöffnungsmethode und des Speicherformats
In Entwicklungsprojekten können wir SQL mit Effiz...
Analyse des Bereitstellungsprozesses der Leistungstestplattform nGrinder mit Docker
Was ist nGrinder? nGrinder ist eine Plattform für...
Detaillierte Erklärung zu Javascript-Dateien und Blobs
Inhaltsverzeichnis Datei() Grammatik Parameter Be...
Häufig verwendete JavaScript-Array-Methoden
Inhaltsverzeichnis 1. filter() 2. fürJedes() 3. e...
So verwenden Sie crontab, um MySQL-Datenbanken regelmäßig im Linux-System zu sichern
Verwenden Sie die System-Crontab, um regelmäßig S...
js, um die Rotation von Webseitenbildern zu realisieren
In diesem Artikel wird der spezifische Code von j...
Was Sie beim Schreiben selbstschließender XHTML-Tags beachten sollten
Das img-Tag in XHTML ist ein sogenanntes selbstsc...
Grafisches Beispiel für die Verwaltung von Datenträgerkontingenten unter Linux
Das Datenträgerkontingent ist die Speichergrenze ...
Docker-Lösung zum Anmelden ohne Root-Rechte
Wenn Sie den Docker-Befehl zum ersten Mal verwend...
Reines CSS, um coole Neonlichteffekte zu erzielen (mit Demo)
Ich habe kürzlich die Tutorial-Reihe zu CSS-Anima...
Detaillierte Erklärung des Vue Notepad-Beispiels
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erklärung zum Ein- und Aussteigen aus dem Docker-Container
1 Starten Sie den Docker-Dienst Zuerst müssen Sie...
Grundlagen der funktionalen Programmierung in JavaScript
Inhaltsverzeichnis 1. Einleitung 2. Was ist funkt...
Windows Server 2019 installieren (grafisches Tutorial)
Windows Server 2019 ist das neueste Server-Betrie...
Vue implementiert ein einfaches Einkaufswagenbeispiel
In diesem Artikelbeispiel wird der spezifische Co...