CSS verfügt über einige weniger bekannte, aber nützliche Funktionen. Wir werden einige davon untersuchen.
1. CSS scroll-snap-type-Eigenschaft und scroll-snap-stop-Eigenschaft
scroll-snap-stop
Wenn diese Eigenschaft für jedes untergeordnete Element unter dem übergeordneten Element festgelegt ist und Sie schnell auf dem Bildschirm scrollen, wird verhindert, dass das nächste Element beim schnellen Scrollen mit einem Trackpad oder Touchscreen passiert.
Gif:
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
aspect-ratio: 2/1;
margin: auto;
border: solid black 2px;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.blue {
background-color: lightblue;
width: 90%;
}
.green {
background-color: lightgreen;
width: 80%;
}
.pink {
background-color: lightpink;
width: 70%;
}
#container > div{
margin: 5px;
scroll-snap-align: center;
scroll-snap-stop: always;
aspect-ratio: 4/1;
}
</style>
</head>
<body>
<div class="container">
<div class="blue"></div>
<div class="green"></div>
<div class="pink"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="pink"></div>
</div>
</body>
</html>
Nach dem Login kopieren
Wert:
Scroll-Snap-Type-Eigenschaft
Ziehen Sie den Schieberegler horizontal, lassen Sie ihn los und Sie werden den Effekt sehen.
Der Effekt tritt ein, wenn Sie auf ein Kästchen klicken und dann mit der linken und rechten Pfeiltaste navigieren
Gif:
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 80%;
aspect-ratio: 2/1;
overflow-x: scroll;
overflow-y: hidden;
margin: auto;
white-space: nowrap;
scroll-snap-type: x mandatory;
border: solid black 2px;
}
.blue {
background-color: lightblue;
aspect-ratio: 1/2;
height: 95%;
}
.green {
background-color: lightgreen;
height: 50%;
aspect-ratio: 2/1;
}
.blue, .green {
display: inline-block;
scroll-snap-align: center;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</body>
</html>
Nach dem Login kopieren
Wert:
Keine: Dies ist der Standardwert
X: Der Effekt wird auf der x-Achse eingestellt
Y: Der Effekt wird auf der y-Achse eingestellt
Beide: Der Effekt wird auf der x-Achse und der y-Achse eingestellt
Obligatorisch: Nachdem die Schriftrolle beendet ist, bewegt sich die Schriftrolle automatisch zum Erfassungspunkt
2. CSS-Place-Items-Eigenschaft
Der für die place-items-Eigenschaft festgelegte Wert wird sowohl auf die align-items- als auch auf die justify-items-Eigenschaften angewendet.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 60%;
aspect-ratio: 3/2;
border: solid black 1px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
place-items: center;
}
.container > div {
width: 50%;
aspect-ratio: 2;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Nach dem Login kopieren
Wert:
Start: Elemente am Anfang der Rasterzelle ausrichten
Ende: Elemente am Ende der Rasterzelle ausrichten
Mitte: Elemente in der Mitte der Rasterzelle ausrichten
3. CSS alle Eigenschaften
Ändert alle Eigenschaften, die auf das Element oder sein übergeordnetes Element angewendet werden, auf ihre Anfangswerte
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: small;
color : red
}
}
.a{
background-color: yellow;
color: red;
all: unset;
}
</style>
</head>
<body>
<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>
</html>
Nach dem Login kopieren
Wert:
- Unset: Ändert alle Eigenschaften, die auf das Element oder das übergeordnete Element des Elements angewendet werden, auf ihren übergeordneten Wert, wenn sie vererbbar sind, oder auf ihren Anfangswert, wenn nicht
4. CSS-Benutzerauswahl-Eigenschaft
Verhindert, dass Benutzer Texte auswählen
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
div {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>The text of this div element cannot be selected.</div>
</body>
</html>
Nach dem Login kopieren
5. CSS-Caret-Color-Eigenschaft
Ändert die Farbe des Cursors (Caret) in Texteingabefeldern.
<!DOCTYPE html>
<html>
<head>
<style>
.a {
caret-color: blue;
}
</style>
</head>
<body>
<input class="a" value="bulue">
</body>
</html>
Nach dem Login kopieren
6. CSS-Text-Decoration-Skip-Ink-Eigenschaft
Die CSS-Eigenschaft text-decoration-skip-ink gibt an, wie Überstreichungen und Unterstreichungen gezeichnet werden, wenn Glyphen über Linien und Unterstreichungen geführt werden.
Wert:
Beispiel:
text-decoration-skip-ink: none;
Nach dem Login kopieren
Beispiel:
text-decoration-skip-ink: auto;
Nach dem Login kopieren
7. CSS-Pointer-Events-Eigenschaft
Die Eigenschaft pointer-events definiert, ob ein Element auf Zeigerereignisse reagiert oder nicht.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
pointer-events: none;
}
.b {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="a"><a href="https://www.gogle.com">Google</a></div>
<div class="b"> <a href="https://www.google.com">Google</a></div>
</body>
</html>
Nach dem Login kopieren
Wert:
Abschluss
Wir haben die wenig bekannten Funktionen von CSS untersucht. Wir haben die Funktionen kennengelernt, die in Ihren Anwendungen nützlich sein werden.
Das obige ist der detaillierte Inhalt vonWeniger bekannte, aber nützliche Funktionen von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
