Was ist CSS-Baseline?

In CSS ist die Grundlinie „Grundlinie“ nicht der untere Rand chinesischer Schriftzeichen, sondern der untere Rand englischer Buchstaben. Die Grundlinie stimmt immer mit dem höchsten Element in der Reihe überein und die Grundlinie ändert sich mit dem höchsten Element in der Reihe.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

1. Grundkonzepte

1. Grundlinie, untere Zeile, obere Zeile, mittlere Zeile

Hinweis: Die Grundlinie (Grundlinie) ist nicht die Unterkante des chinesischen Schriftzeichentextes, sondern die Unterkante des Englischer Buchstabe „x“.

2. Inhaltsbereich

Der Inhaltsbereich bezieht sich auf den Bereich, der von der unteren und oberen Zeile umschlossen wird (Anzeige von Inline-Elementen: Inline; kann über das Attribut „Hintergrundfarbe“ angezeigt werden). in der Praxis, aber es existiert. Die Größe des Inhaltsbereichs ändert sich basierend auf dem Wert von „font-size“ und der Anzahl der Wörter.

3. Zeilenabstand, Zeilenhöhe

Zeilenhöhe (Zeilenhöhe): Es umfasst den Inhaltsbereich und den leeren Bereich, der basierend auf dem Inhaltsbereich symmetrisch erweitert wird und den wir Zeilenhöhe nennen. Im Allgemeinen kann man ihn auch als den Abstand zwischen den Grundlinien benachbarter Textzeilen betrachten.

Zeilenabstand: bezieht sich auf den Abstand zwischen der Grundlinie der vorherigen Textzeile und der oberen Zeile der nächsten Textzeile zwischen benachbarten Texten. Natürlich stelle ich mir das lieber so vor: (Höhe der oberen Textzeile – Höhe des Inhaltsbereichs)/2 + (Höhe der unteren Textzeile – Höhe des Inhaltsbereichs)/2.

4. Inline-Box

Die Inline-Box ist ein Konzept im Browser-Rendering-Modell und kann nicht angezeigt werden, ihre Höhe ist jedoch die durch die Zeilenhöhe angegebene Höhe.

5. Linienbox

Linienbox (Linienbox) ist ein ähnliches Konzept wie die innere Box derselben Linie und ist auch ein Konzept im Browser Rendering-Modus. Die Höhe der Zeilenbox entspricht dem größten Wert der Inline-Box unter allen Elementen in dieser Zeile (die Inline-Box mit dem größten Zeilenhöhenwert wird als Benchmark verwendet, und andere Inline-Boxen werden anhand ihrer eigenen an der Benchmark ausgerichtet Ausrichtungsmethoden und die Höhe des Linienfelds wird schließlich berechnet)

2. Vertical -align: Legen Sie die vertikale Ausrichtung des Elements fest.

 Die Zeilenhöhe ist die vertikale Zentrierung (Zeilenhöhe) einer einzelnen Zeile mit reinem Text. Wenn die Zeile Bilder und Text enthält, kann der Leser nach dem Rendern feststellen, dass Text und Bild nicht entlang der Zeile zentriert sind Mittellinie in vertikaler Richtung, aber entlang der Grundlinienausrichtung. Dies liegt daran, dass die standardmäßige vertikale Ausrichtung von Elementen die Grundlinienausrichtung ist (vertikal-align: baseline).

CSS-Syntax: baseline |

   Beschreibung:

    Legen Sie die vertikale Ausrichtung des Elementinhalts fest.

   baseline: Grundlinienausrichtung;

   super: hochgestellte Anzeige;

   text-top: obere Ausrichtung des Textes;

   Mitte: Zentrale Ausrichtung;

 unten: Untere Ausrichtung;

  text-bottom: Untere Ausrichtung des Textes;

  Prozentsatz und Länge: CSS2, kann negativ sein.

  Anfangswert: Grundlinie

  Vererbung: Nicht vererbt

  Was hier besondere Aufmerksamkeit erfordert, ist: Das vertikale Ausrichtungsattribut ist nur für Text gültig (das bedeutet, dass der Elementknoten, der den #Text-Knoten enthält, das vertikale Ausrichtungsattribut korrekt verarbeiten kann ). Außerdem kann diese Eigenschaft nicht vererbt werden.

Detaillierte Erläuterung der Attributwerte

  Im obigen Abschnitt haben wir die Grundlinie, die obere Linie, die mittlere Linie und die untere Linie des Textes sowie den Inhaltsbereich, das Inline-Feld und das Zeilenfeld sowie die vertikale Ausrichtung darin vorgestellt Der Abschnitt ist eng mit diesen Konzepten verbunden.

1. Grundlinienausrichtung (vertikal-align: baseline)

Grundlinienausrichtung (vertikal-align: baseline) richtet die Grundlinie des Elements an der Grundlinie des Basiselements aus (unter Verwendung der höchsten Zeilenhöhe als Basis)

2. Obere Ausrichtung (vertikale Ausrichtung: oben)

Obere Ausrichtung (vertikale Ausrichtung: oben) dient dazu, die Oberseite der Inline-Box des Elements an der Oberseite der Zeilenbox auszurichten

3. Text-oben-Ausrichtung (vertikal-align: text-top)

Text-top-Ausrichtung (vertikal-align: text-top) dient dazu, den oberen Rand des Inline-Felds des Elements an der oberen Zeile auszurichten der Textzeile

4. Untere Ausrichtung (vertikale Ausrichtung: unten)

Untere Ausrichtung (vertikale Ausrichtung: unten) ist das Gegenteil der oberen Ausrichtung (vertikale Ausrichtung: oben)

5 . Textausrichtung unten (vertikal ausrichten: Text unten)

6. Vertikal ausrichten: Mitte

Mittlere Ausrichtung (vertikal ausrichten: Mitte) wird normalerweise bei Bildern verwendet, um die vertikale Mittellinie des Bildes auszurichten die Textzeilenausrichtung. (Es gibt einige Abweichungen bei der Verarbeitung von Texten. Die konkrete Grundlage wurde noch nicht erforscht. Studierende, die Recherchen durchgeführt haben, können mich kontaktieren ~~)

  Die Definition der Mittellinie lautet: Die Mittellinie liegt über der Grundlinie , und der Abstand von der Grundlinie ist der Kleinbuchstabe x die Hälfte der Höhe (d. h. 0,5ex), und ex hängt mit der Schriftgröße zusammen. Die meisten Browser gehen davon aus, dass 1ex = 0,5em (em) ebenfalls eine relative Einheit ist, keine absolute Einheit), so dass es einen viertel Geviert über der Grundlinie liegt und an der Mittellinie ausgerichtet ist.

7. Hochgestellt und tiefgestellt

 Hochgestellt (vertikal-align:super) erhöht die Grundlinie des Elements relativ zur Grundlinie des Basiselements, und tiefgestellt (vertikal-align:sub) senkt die Grundlinie des Elements und verschiebt die Amplitude ist nicht in der CSS-Spezifikation angegeben und bleibt dem Browser überlassen.

Hochgestellt und tiefgestellt ändern die Größe des Elementtexts nicht.

8. Längenwerte und Prozentsätze

Ähnlich wie hochgestellte und tiefgestellte Werte können Längenwerte und Prozentwerte die Grundlinie eines Elements im Verhältnis zur Grundlinie von höher (positiver Wert) oder niedriger (negativer Wert) machen das Basiselement.

Die Bewegungsgröße von hoch- und tiefgestellten Zeichen wird vom Browser bestimmt, und durch Festlegen des Längenwerts oder Prozentsatzes kann der Bereich der Textbewegung nach oben und unten genau gesteuert werden.

Prozentsatz bezieht sich auf die Zeilenhöhe. Der folgende Code wird beispielsweise wie in der folgenden Abbildung angezeigt.

Mein Test unter @FireFox

Testcode:

<style type="text/css">
  p {
     vertical-align:baseline;    
     font-size:20px;  
     line-height:60px; 
     background-color:yellow; 
  }
  span {
     background-color: red; 
  }
  u { 
     background-color: blue; 
  }
  del { 
     background-color: pink; 
  }
</style>

//HTML代码
<p> 
    <span>Ajax测试</span> 
    <u>Ajax测试</u> 
    <del>Ajax测试</del> 
    Ajax测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 
</p>

Standard:

Andere Anweisungen:

1. offsetBreite der SPAN-, U-, DEL-Tags = SUM (Zeichen * Schriftgröße * Korrektur Koeffizient) (Hier ist der Korrekturkoeffizient für Chinesisch 1, der Korrekturkoeffizient für Zahlen beträgt 0,6, der Korrekturkoeffizient für englische Zeichen ist sehr unterschiedlich, zum Beispiel ist ijl sehr klein, wmk usw. ist relativ groß und die Korrektur Der Koeffizient für Großbuchstaben im Englischen ist ebenfalls nicht einheitlich.

   2. Die offsetHeight der SPAN-, U- und DEL-Tags.

  Folgerung: Der Hintergrund-Rendering-Bereich des Inline-Elements ist die Größe des Inhaltsbereichs, die direkt von der Schriftgröße beeinflusst wird.

  Für

-Elemente auf Blockebene wird die berechnete Höhe des Blockebenenelements durch die Höhe des enthaltenen Zeilenfelds akkumuliert, sodass die Höhe hier 60 Pixel beträgt; 3. Stellen Sie span.style.lineHeight auf ein 15px (von 10px auf 60px geändert) —-> Keine Änderung gefunden

  Schlussfolgerung: Die Größe des Inhaltsbereichs wird nicht durch die Zeilenhöhe beeinflusst, die zur Steuerung des Abstands zwischen den Grundlinien benachbarter Textzeilen verwendet wird.

  4. Setzen Sie span.style.lineHeight auf 70px (von 61px bis 80px) –->Die Höhe der Zeilenbox beginnt sich mit der Einstellung anzupassen

  Folgerung 1: Die Höhe der Zeilenbox ist die höchste Inline-Boxhöhe in der Zeile. durch Linienhöhenverstellung.

        Der Höhenberechnungswert des p-Elements ist der span.style.lineHeight-Wert, der nicht von p.style.lineHeight gesteuert wird.

  Folgerung 2: Der berechnete Höhenwert von

ohne Festlegen des Höhenattributs ist der akkumulierte Wert der Höhe des Linienfelds. 5. Setzen Sie span.style.verticalAlign= sub; Untere Skripte werden basierend auf der Grundlinie verschoben.

   6. Bestätigung aller Ausrichtungsmethoden:

    a) Bestätigen Sie zunächst das Basiselement in der Zeile und nehmen Sie das Element mit dem maximalen Zeilenhöhenwert als Basis;

    b) Richten Sie andere Texte entsprechend am Basiselement aus um die Linienhöhe und die vertikale Ausrichtung zu erreichen, um den Effekt zu erzielen

ˆ d) „oben“ und „unten“ beziehen sich auf die Ausrichtung der Inline-Box des Elements, „oben“ bezieht sich auf die Ausrichtung der Oberseite der Inline-Box des Elements mit der Oberseite der Basis-Inline-Box

ˆ ˆ e) text-top und text-; Unten wirkt sich auch auf die Höhe des letzten Zeilenfelds aus, das sich auf das Element bezieht. Die Oberseite des Inline-Felds wird an der Oberseite des Inhaltsbereichs des Basiselements ausgerichtet (wenn Zeilenhöhe = die Höhe des Inhaltsbereichs). , wird es am oberen Rand des Basisinhaltsbereichs ausgerichtet. Wenn die Zeilenhöhe kleiner als die Höhe des Inhaltsbereichs ist, wird der Text weiter nach oben verschoben. Wenn die Höhe auf 0 Pixel eingestellt ist, wird die vertikale Mitte des Der Inhaltsbereich wird am oberen Rand des Basisinhaltsbereichs ausgerichtet.

    g) Was die Mitte betrifft, fühlt es sich an, als wäre sie symmetrisch basierend auf einer Grundlinie erweitert, aber die Regeln zum Generieren der Grundlinie sind unklar.

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist CSS-Baseline?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!