Web-Frontend
CSS-Tutorial
Einführung in CSS-Elemente auf Blockebene/Inline-Elemente, Vererbung und verwandte Eigenschaften
Einführung in CSS-Elemente auf Blockebene/Inline-Elemente, Vererbung und verwandte Eigenschaften
Was sind Elemente auf Blockebene?
Browser zeigen Elemente auf Blockebene normalerweise mit Zeilenumbrüchen vor und nach dem Element an. Sie können sich dies als einen Haufen Kisten vorstellen.
Elemente auf Blockebene beginnen immer in einer neuen Zeile und nehmen die gesamte verfügbare Breite ein (wobei sie sich so weit wie möglich nach links und rechts ausdehnen).
Verwendung: -Elemente auf Blockebene dürfen nur innerhalb des <body>-Elements erscheinen.
Was sind Inline-Elemente?
In HTML ist ein Inline-Element eines, das nur den Raum einnimmt, der durch das Tag begrenzt wird, das das Element definiert, anstatt den Fluss des Inhalts zu unterbrechen. In diesem Artikel untersuchen wir HTML-Inline-Elemente und wie sie sich von Elementen auf Blockebene unterscheiden.
Inline-Elemente beginnen nicht in einer neuen Zeile und nehmen nur die erforderliche Breite ein.
Was ist Vererbung?
Vererbung in CSS ist ein Mechanismus zum Übergeben bestimmter Eigenschaften von einem übergeordneten Element an seine untergeordneten Elemente.
Persönliches Verständnis: Welche Faktoren standardmäßig von den Eltern an die Kinder weitergegeben werden. Beispiel: Wenn beide Elternteile schwarze Haare haben, erben ihre Kinder standardmäßig schwarze Haare. Sofern das Kind seine Haare nicht grau färben möchte, sprechen wir separat darüber. Wenn es nicht das Kind dieses Elternteils ist, sprechen wir separat darüber.
Nicht alle CSS-Eigenschaften werden vererbt, da einige von ihnen bedeutungslos sind. Beispielsweise werden Ränder nicht vererbt, da untergeordnete Elemente wahrscheinlich nicht dieselben Ränder wie ihre übergeordneten Elemente benötigen. In den meisten Fällen wird Ihnen der gesunde Menschenverstand sagen, welche Eigenschaften vererbt werden und welche nicht, Sie müssen sich jedoch jede Eigenschaft in der Eigenschaftsübersichtstabelle der CSS 2.1-Spezifikation ansehen.
Attribute, die in CSS vererbt werden können
1. Nicht vererbbare Attribute
1. Gibt den Typ des Felds an, das ein Element generieren soll
2 Attribute:
vertikal-align: vertikale Textausrichtung
text-decoration: gibt die dem Text hinzugefügte Dekoration an
text-shadow: Textschatteneffekt
white-space: Verarbeitung von Leerzeichen
unicode- bidi: Legen Sie die Richtung des Textes fest
3. Box-Modellattribute:
width, height, margin, margin-top, margin-right, margin-bottom, margin-left, border, border-style, Rand-Top-Stil, Rand-Rechts-Stil, Rand-Bottom-Stil, Rand-Links-Stil, Rand-Breite, Rand-Obere-Breite, Rand-Rechts-Rechts, Rand-Unterseite-Breite, Rand-Links- Breite, Randfarbe, Randfarbe oben, Randfarbe rechts, Randfarbe unten, Randfarbe links, Rand oben, Rand rechts, Rand unten, Rand links, Polsterung, Polsterung oben, Polsterung rechts, Polsterung unten, Polsterung links
4. Hintergrundattribute:
Hintergrund, Hintergrundfarbe, Hintergrundbild, Hintergrundwiederholung, Hintergrundposition, Hintergrundanhang
5. Positionierungsattribute:
Float, Clear, Position, Top, Right, Bottom, Left, Min-Breite, Min-Höhe, Max-Breite, Max-Höhe, Überlauf, Clip, Z-Index
6 Attribute:
Inhalt, Zähler-Reset, Zähler-Inkrement
7. Attribute des Umrissstils, Umrissbreite, Umrissfarbe, Umriss
8 >Größe, Seitenumbruch vor, Seitenumbruch nach
9. Klangstilattribute:
Pause vor, Pause nach, Pause, Cue vor, Cue nach, Cue, Wiedergabe während
2. Geerbte Attribute
font: kombinierte Schriftarten
font-family: gibt die Schriftfamilie des Elements an
font-weight: legt die Dicke des Elements fest Schriftart
Schriftgröße: Legen Sie die Größe der Schriftart fest.
Schriftstil: Definieren Sie den Stil der Schriftart.
Schriftartvariante: Legen Sie die Schriftart für Kapitälchen fest, um Text anzuzeigen, was bedeutet, dass alles in Kleinbuchstaben geschrieben ist Buchstaben werden in Großbuchstaben umgewandelt, aber alle Buchstaben mit Kapitälchen haben im Vergleich zum Rest des Textes eine kleinere Schriftgröße.
font-stretch: Dehnen und transformieren Sie die aktuelle Schriftfamilie. Wird nicht von allen gängigen Browsern unterstützt.
font-size-adjust: Geben Sie einen Aspektwert für ein Element an, damit die x-Höhe der bevorzugten Schriftart beibehalten wird.
2. Textreihenattribute
text-indent: Texteinzug
text-align: horizontale Textausrichtung
line-height: Zeilenhöhe
word-spacing: Abstand zwischen Wörtern vergrößern oder verkleinern Leerraum (d. h. Wortabstand)
Buchstabenabstand: Erhöhen oder verringern Sie den Abstand zwischen Zeichen (Zeichenabstand)
Texttransformation: Steuern Sie die Groß-/Kleinschreibung des Textes.
Richtung: Geben Sie die Schreibrichtung des Textes an.
Farbe : Textfarbe
3. Elementsichtbarkeit: Sichtbarkeit
4. Tabellenlayout:
Beschriftungsseite, Randreduzierung, Randabstand, leere Zellen, Tabellenlayout
5 Attribute:
list-style-type, list-style-image, list-style-position, list-style
6. Attribute des generierten Inhalts: Anführungszeichen
7. Seitenstilattribute:
Seite, Seitenumbruch, Fenster, Waisen
9. Klangstilattribute:
Speak, Speak-Interpunktion, Speak-Numeral, Speak-Header, Speech-Rate, Volume, Stimmfamilie, Tonhöhe, Tonhöhenbereich, Betonung, Azimut, Elevation
3 Attribute, die von allen Elementen geerbt werden können
1. Elementsichtbarkeit: Sichtbarkeit
4. Attribute, die von Inline-Elementen geerbt werden können
1. Attribute der Textreihe außer Texteinzug und Textausrichtung
1, text-indent, text-alignnce_and_cascade#The_cascade
Das obige ist der detaillierte Inhalt vonEinführung in CSS-Elemente auf Blockebene/Inline-Elemente, Vererbung und verwandte Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So sehen Sie das Datum der Bootstrap
Apr 07, 2025 pm 03:03 PM
ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So überprüfen Sie das Bootstrap -Datum
Apr 07, 2025 pm 03:06 PM
Befolgen Sie die folgenden Schritte, um Daten in Bootstrap zu überprüfen: Führen Sie die erforderlichen Skripte und Stile ein. Initialisieren Sie die Datumsauswahlkomponente; Legen Sie das Data-BV-Datatattribut fest, um die Überprüfung zu ermöglichen. Konfigurieren von Überprüfungsregeln (z. B. Datumsformate, Fehlermeldungen usw.); Integrieren Sie das Bootstrap -Verifizierungs -Framework und überprüfen Sie automatisch die Datumseingabe, wenn das Formular eingereicht wird.
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
