Heim > Artikel > Web-Frontend > 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
- 一个新手Original
- 2017-09-23 10:06:241767Durchsuche
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!
In Verbindung stehende Artikel
Mehr sehen- Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses
- Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite
- Reine CSS3-Vollbild-Diashow-Effekte
- Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen
- Atemberaubende sechseckige CSS3-Menüanimationseffekte