N Möglichkeiten, adaptive Teiler geschickt mit CSS zu implementieren

Trennlinien sind eine gängige Gestaltungsart auf Webseiten. Weitere Antworten auf Zhihu

Die Anpassungsfähigkeit bedeutet hier, dass sich die horizontalen Linien auf beiden Seiten an die Anzahl der Zeichen und die Breite des übergeordneten Elements anpassen.

Ich habe mir heimlich Zhihus Implementierung angesehen. Sie ist offensichtlich mit einem weißen Hintergrund bedeckt. Wenn man ein wenig Hintergrund hinzufügt, wird das Geheimnis gelüftet.

Ich dachte: Zhihus Front-End ist nicht so gut? Vielleicht liegt der Fokus anderer Leute nicht hierauf.

Hier sind ein paar bessere Möglichkeiten, es umzusetzen, die Art, die nicht aufgedeckt wird

1. Pseudoelement + Transformation: translateX(-100%);

Das Hauptprinzip besteht darin, den Text mittig auszurichten (text-align: center;) und dann zwei Pseudoelemente anzugeben, von denen jedes absolut positioniert ist. Zu diesem Zeitpunkt sind die Pseudoelemente auch horizontal zentriert. Stellen Sie eine ausreichende Breite ein und verschieben Sie dann das linke Element um 100 % nach links. Denken Sie daran, das übergeordnete Element auszublenden, wenn es den Grenzwert überschreitet.

Die konkrete Umsetzung erfolgt wie folgt

Die HTML-Struktur ist

<div class="title">Ich bin die Trennlinie</div>

Der CSS-Stil ist

.Titel{
    Position: relativ;
    Textausrichtung: zentriert;
    Überlauf: versteckt;
    Schriftgröße: 14px;
    Farbe: #999;
}
.title::vorher,.title::nachher{
    Inhalt: '';
    Anzeige: Inline-Block;
    Breite: 100 %;
    Höhe: 1px;
    Position: absolut;
    Hintergrund: #ccc;
    oben: 50 %;
}
.title::vor{
    Rand links: -10px;
    transformieren: übersetzenX(-100%);
}
.title::nach{
    Rand links: 10px;
}

CSS-Trennlinie (Pseudoelement + Transformation)

2. Pseudoelemente + Flex

Das ist einfacher zu verstehen. Setzen Sie display:flex, und dann füllen die beiden Pseudoelemente den verbleibenden Platz.

Die konkrete Umsetzung erfolgt wie folgt

Die HTML-Struktur ist

<div class="title">Ich bin die Trennlinie</div>

Der CSS-Stil ist

.Titel{
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Schriftgröße: 14px;
    Farbe: #999;
}
.title::vorher,.title::nachher{
    Inhalt: '';
    biegen: 1;
    Höhe: 1px;
    Hintergrund: #ccc;
}
.title::vor{
    Rand rechts: 10px;
}
.title::nach{
    Rand links: 10px;
}

CSS-Trennlinie (Pseudoelement + Flex)

3. Pseudoelement + Boxschatten/Umriss + Clip-Pfad

Verwenden Sie außerdem text-align: center, um den Text und das Pseudoelement zu zentrieren, und erzeugen Sie dann einen ausreichend großen Box-Shadow oder Umriss. Da es keine einzelne Richtung unterstützt, wird es mit Clip-Path oder Clip zugeschnitten.

Die konkrete Umsetzung erfolgt wie folgt

Die HTML-Struktur ist

<div class="title">Ich bin die Trennlinie</div>

Der CSS-Stil ist

.Titel{
    Textausrichtung: zentriert;
    Schriftgröße: 14px;
    Farbe: #999;
    Überlauf: versteckt;
}
.title::vorher,.title::nachher{
    Inhalt: '';
    Anzeige: Inline-Block;
    Breite: 0;
    Höhe: 1px;
    Kastenschatten: 0 0 0 9999px #ccc;
    vertikale Ausrichtung: Mitte;
}
.title::vor{
    Rand rechts: 10px;
    Clip-Pfad: Polygon (0 0, -9999px 0, -9999px 100 %, 0 100 %);
}
.title::nach{
    Rand links: 10px;
    Clip-Pfad: Polygon (0 0, 9999px 0, 9999px 100 %, 0 100 %);
}

CSS-Trennlinie (Pseudoelement + Box-Shadow/Outline + Clip-Pfad)

4. Pseudoelement + rechts: 100%

Diese Implementierung erfordert eine zusätzliche Tag-Ebene. Der äußere Teil ist immer noch text-align: center. Fügen Sie dem inneren Text zwei Pseudoelemente mit absoluter Positionierung hinzu. Das linke wird auf 100 % des rechten eingestellt (relativ zum Text-Tag).

Die konkrete Umsetzung erfolgt wie folgt

Die HTML-Struktur ist

<div Klasse="Titel">
    <span class="inner">Ich bin die Trennlinie</span>
</div>

Der CSS-Stil ist

.Titel{
    Textausrichtung: zentriert;
    Schriftgröße: 14px;
    Farbe: #999;
    Überlauf: versteckt;
}
.innere{
    Position: relativ;
}
.inner::vorher,.inner::nachher{
    Position: absolut;
    Inhalt: '';
    Breite: 9999px;
    Höhe: 1px;
    Hintergrund: #ccc;
    oben: 50 %;
}
.inner::before{
    rechts: 100%;
    Rand rechts: 10px;
}
.inner::nach{
    Rand links: 10px;
}

CSS-Trennlinie (Pseudoelement + rechts: 100%)

5. Grenze+Transformation

Diese Idee erfordert keine Pseudoelemente, aber zusätzliche Tags, um dem internen Text links und rechts einen 1px breiten Rand zu geben. Zu diesem Zeitpunkt müssen Sie die Zeilenhöhe auf 1px festlegen. Da der interne Text groß genug ist (größer als das übergeordnete Element), können Sie die absolute Positionierung verwenden und transform: translateX(-50%), um ihn zu zentrieren.

Die konkrete Umsetzung erfolgt wie folgt

Die HTML-Struktur ist

<div Klasse="Titel">
    <span class="inner">Ich bin die Trennlinie</span>
</div>

Der CSS-Stil ist

.Titel{
    Position: relativ;
    Textausrichtung: zentriert;
    Schriftgröße: 14px;
    Farbe: #999;
    Überlauf: versteckt;
    padding: .6em 0;/**Höhe erhöhen**/
}
.innere{
    Position: absolut;
    links: 50%;
    transformieren: übersetzenX(-50%);
    Leerzeichen: Nowrap;
    Zeilenhöhe: 1px;
    Rahmen links: 9999px durchgezogen #ccc;
    Rahmen rechts: 9999px durchgezogen #ccc;
    Polsterung: 0 10px;
}

CSS-Trennlinie (border+transform)

6. Pseudoelement + Rahmen + links/rechts

Diese Idee erfordert lediglich ein Pseudoelement, das innerhalb des Textes generiert wird, und die Position wird mithilfe eines ausreichend großen Rahmens und desselben negativen Wertes (absolute Positionierung + links/rechts) wiederhergestellt.

Die konkrete Umsetzung erfolgt wie folgt

Die HTML-Struktur ist

<div Klasse="Titel">
    <span class="inner">Ich bin die Trennlinie</span>
</div>

Der CSS-Stil ist

.Titel{
    Textausrichtung: zentriert;
    Schriftgröße: 14px;
    Farbe: #999;
    Überlauf: versteckt;
}
.innere{
    Position: relativ;
    Polsterung: 0 10px;
}
.inner::before{
    Inhalt: '';
    Position: absolut;
    Höhe: 1px;
    oben: 50 %;
    Rahmen links: 9999px durchgezogen #ccc;
    Rahmen rechts: 9999px durchgezogen #ccc;
    rechts: -9999px;
    links: -9999px;
}

CSS-Trennlinie (Pseudoelement + Rahmen + links/rechts)

7. Pseudoelement + Tabellenzelle

Die Hauptidee besteht darin, „display:table“ für das übergeordnete Element und „display:table-cell“ für das Pseudoelement festzulegen und eine ausreichend große Breite einzustellen.

Die konkrete Umsetzung erfolgt wie folgt

Die HTML-Struktur ist

<div Klasse="Titel">
    <span class="inner">Ich bin die Trennlinie</span>
</div>

Der CSS-Stil ist

.Titel{
    Anzeige: Tabelle;
    Schriftgröße: 14px;
    Farbe: #999;
}
.innere{
    Anzeige: Tabellenzelle;
    Leerzeichen: Nowrap;
    Polsterung: 0 10px;
}
.title::vorher,.title::nachher{
    Inhalt: '';
    Anzeige: Tabellenzelle;
    Breite: 9999px;
    Überlauf: versteckt;
    Hintergrund: linearer Farbverlauf (#ccc 0,#ccc) Mitte, keine Wiederholung;/**Dies wird mithilfe eines linearen Farbverlaufs generiert, es können auch andere Methoden verwendet werden**/
    Hintergrundgröße: 100 % 1px;
}

CSS-Trennlinie (Pseudoelement + Tabellenzelle)

8.Feldsatz+Legende

Durch die Kombination von Feldsatz- und Legenden-Tags können Sie auf natürliche Weise den Effekt von Trennlinien erzielen. Siehe den Artikel von Zhang Xinxu

Die konkrete Umsetzung erfolgt wie folgt

Die HTML-Struktur ist

<fieldset class="Titel">
    <legend class="inner">Ich bin die Trennlinie</legend>
</Feldsatz>

Der CSS-Stil ist

.Titel{
    Schriftgröße: 14px;
    Farbe: #999;
    Rand: 0;
    Rahmen oben: 1px durchgezogen #ccc;
    Polsterung: 0;
}
.innere{
    Rand: 0 automatisch;;
    Polsterung: 0 10px;
}

CSS-Trennzeichen (Feldsatz+Legende)

Zusammenfassung

Es gibt 8 Möglichkeiten, den Effekt der oben aufgeführten Trennlinie zu erzielen. Jede Methode hat unterschiedliche Ideen. Wichtig ist, dass Sie Ihre Vorstellungskraft einsetzen können. Vielleicht ist das der Unterschied zwischen CSS und anderen Sprachen.

Ich habe es hier geklärt. Der Gesamteffekt ist wie folgt. Sie können es hier ansehen. Sie können die Methode auswählen, die Sie im eigentlichen Projekt benötigen.

Zusammenfassen

Oben sind die N Methoden, die ich Ihnen vorgestellt habe, um adaptive Trennlinien geschickt mit CSS zu implementieren. Ich hoffe, sie werden 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!