CSS verfügt über einige weniger bekannte, aber nützliche Funktionen. Wir werden einige davon untersuchen.
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>
Wert:
Normal: Dies ist der Standardwert. Scrollen ist das Standardverhalten
Immer: Nach schnellem Wischen mit Touchpad oder Touchscreen stoppt der Bildlauf und das nächste Element wird scharfgestellt.
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>
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
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>
Wert:
Start: Elemente am Anfang der Rasterzelle ausrichten
Ende: Elemente am Ende der Rasterzelle ausrichten
Mitte: Elemente in der Mitte der Rasterzelle ausrichten
Ä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>
Wert:
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>
Ä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>
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;
Beispiel:
text-decoration-skip-ink: auto;
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>
Wert:
Keine: Standard
Auto: Das Element reagiert nicht auf Zeigerereignisse
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!
