Heim > Artikel > Web-Frontend > Teilen Sie 12 fantastische CSS-Kenntnisse
Die folgenden fortgeschrittenen CSS-Techniken
Verwenden Sie :not(), um Rahmen im Menü anzuwenden bzw. die Anwendung aufzuheben
Zeilenhöhe zum Text hinzufügen
Alles ist vertikal zentriert
Durch Kommas getrennte Liste
Verwenden Sie negatives n-tes Kind, um Elemente auszuwählen
Verwenden Sie SVG
für Symbole Anzeigetext optimieren
Für reine CSS-Schieberegler verwenden Sie max-height
ErbenBox-Größe
TabelleGleichmäßige Breite der Zellen
Verwenden Sie Flexbox, um verschiedene Hacks von Margen
loszuwerden Verwenden Sie die Attributauswahl für leere Links
Fügen Sie zunächst jedem Menüpunkt einen Rahmen hinzu
/* add border */ .nav li { border-right: 1px solid #666; }
…und dann das letzte Element entfernen…
//* Rand entfernen */
.nav li:last-child { border-right: none; }
...Sie können die Pseudoklasse :not() direkt verwenden, um Elemente anzuwenden:
.nav li:not(:last-child) { border-right: 1px solid #666; }
Auf diese Weise ist der Code sauber, lesbar und leicht zu verstehen.
Wenn Ihr neues Element über Geschwisterelemente verfügt, können Sie natürlich auch den universellen Geschwisterselektor (~) verwenden:
..nav li:first-child ~ li {
border-left: 1px solid #666; }
Sie müssen line-height nicht separat zu jedem
,
body { line-height: 1; }
Auf diese Weise können Textelemente problemlos von body erben.
Um alle Elemente vertikal zu zentrieren, ist es so einfach:
html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
Sehen Sie, ist das nicht ganz einfach?
Hinweis: Seien Sie vorsichtig mit Flexbox in IE11.
Lassen Sie HTML-Listenelemente wie eine echte, durch Kommas getrennte Liste aussehen:
ul > li:not(:last-child)::after { content: ","; }
Verwenden Sie die Pseudoklasse :not() für das letzte Listenelement.
Verwenden Sie in CSS das negative n-te Kind, um Element 1 bis Element n auszuwählen.
li { display: none; } /* select items 1 through 3 and display them */ li:nth-child(-n+3) { display: block; }
So einfach ist das.
für Symbole Es gibt keinen Grund, SVG nicht für Symbole zu verwenden:
.logo { background: url("logo.svg"); }
SVG verfügt über eine gute Skalierbarkeit für alle Auflösungstypen und unterstützt alle Browser, die zu IE9 zurückkehren. Auf diese Weise können Sie .png-, .jpg- oder .gif-Dateien vermeiden.
Manchmal werden Schriftarten nicht auf allen Geräten optimal angezeigt. Lassen Sie sich daher von Ihrem Gerätebrowser helfen:
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
Hinweis: Bitte verwenden Sie „optimizeLegibility“ verantwortungsbewusst. Darüber hinaus bietet IE/Edge keine Unterstützung für die Textwiedergabe.
für reine CSS-Schieberegler Verwenden Sie die maximale Höhe und das Ausblenden von Überläufen, um einen reinen CSS-Schieberegler zu implementieren:
.slider ul { max-height: 0; overlow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; }
Lassen Sie die Boxgröße HTML erben:
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Dadurch ist es einfacher, die Boxgröße in Plugins oder anderen Komponenten zu ändern, die andere Verhaltensweisen nutzen.
Die Arbeit mit Tabellen ist umständlich. Stellen Sie daher sicher, dass Sie table-layout:fixed verwenden, um die Zellen gleich breit zu halten:
.calendar { table-layout: fixed; }
Wenn Sie Spaltentrennzeichen verwenden müssen, können Sie die Hacks für das n-te, erste und letzte untergeordnete Element durch die Leerzeichen-Between-Eigenschaft von Flexbox beseitigen:
.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }
Listentrennzeichen werden jetzt in gleichmäßigen Abständen angezeigt.
Zeigen Sie den Link an, wenn das Element keinen Textwert, das href-Attribut jedoch einen Link hat:
a[href^="http"]:empty::before { content: attr(href); }
Ziemlich praktisch.
Diese fortschrittlichen Techniken funktionieren effektiv in aktuellen Versionen von Chrome, Firefox, Safari und Edge sowie IE11.
Das obige ist der detaillierte Inhalt vonTeilen Sie 12 fantastische CSS-Kenntnisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!