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
Verwendung des Linux-Befehls gzip
1. Befehlseinführung Der Befehl gzip (GNU zip) wi...
Detaillierte Erklärung der Beziehung zwischen Vue und VueComponent
Der folgende Fall überprüft die Wissenspunkte der...
CentOS 7: Erläuterung zum Wechseln des Boot-Kernels und des Boot-Modus
Centos7-Switch-Boot-Kernel Hinweis: Bei Bedarf wi...
Implementierung des Umschreibesprungs in Nginx
1. Neuer und alter Domain-Namenssprung Anwendungs...
Deinstallieren der MySQL-Datenbank unter Linux
Wie deinstalliere ich eine MySQL-Datenbank unter ...
Einfaches Anwendungsbeispiel für MySQL-Trigger
Dieser Artikel veranschaulicht anhand von Beispie...
Detaillierte Erklärung der CocosCreator MVC-Architektur
Überblick Dieser Artikel stellt die in Spieleclie...
Beispiel zum Festlegen der pseudostatischen WordPress-Eigenschaft in Nginx
Zitat aus Baidus Erklärung zu Pseudostatik: Pseud...
32 typische spalten-/rasterbasierte Websites
Wenn Sie nach Inspiration für spaltenbasiertes Web...
Natives JS zum Erstellen eines verschiebbaren Anmeldefelds
Dieser Artikel zeigt ein verschiebbares Anmeldefe...
So verwenden Sie benutzerdefinierte Bilder in HTML zum Anzeigen von Kontrollkästchen
Wenn Sie zur Implementierung eines Kontrollkästch...
Nodejs konvertiert JSON-String in JSON-Objekt-Fehlerlösung
Wie konvertiere ich eine JSON-Zeichenfolge in ein...
Detaillierte Erklärung des Konflikts zwischen Flex-Layout und Position: absolut/fest
Ich bin bei der Entwicklung eines Projekts schon ...
MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten
Inhaltsverzeichnis Vielfältige Einsatzmöglichkeit...
Ein wenig bekanntes JS-Problem: [] == ![] ist wahr, aber {} == !{} ist falsch
konsole.log( [] == ![] ) // wahr console.log( {} ...