首頁 > 文章 > web前端 > CSS 鮮為人知但有用的功能

CSS 鮮為人知但有用的功能

Susan Sarandon原創: 2024-10-04 06:17:29355瀏覽

CSS 有一些鮮為人知但有用的功能。我們將檢查其中的一些。

1. CSS的scroll-snap-type屬性和scroll-snap-stop屬性

滾動快速停止

為父元素下的每個子元素設定此屬性時，當您快速捲動螢幕時，使用觸控板或觸控螢幕快速捲動時會阻止下一個元素通過。

動圖：

Less known but useful features of CSS

範例：


<!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>

值：

正常：這是預設值。滾動是預設行為
總是：使用觸控板或觸控螢幕快速滑動後，捲動停止，下一個元素會捕捉焦點。

滾動捕捉類型屬性

水平拖曳滑塊，鬆開即可看到效果。
當您單擊一個框，然後使用向左和向右箭頭鍵導航時，就會出現這種效果

動圖：

Less known but useful features of CSS

範例：


<!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>

值：

無：這是預設值
X ：效果設定在 x 軸
Y ：效果設定在 y 軸
兩者：效果設定在x軸和y軸
強制：滾動結束後，滾動自動移動到捕捉點

2. CSS place-items 屬性

為 place-items 屬性設定的值將應用於 align-items 和 justify-items 屬性。

範例：

Less known but useful features of CSS


<!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>

值：

開始： 在網格單元的開頭對齊項目
結束： 在網格單元末尾對齊項目
居中： 將物品與網格單元的中心對齊

3.CSS所有屬性

將套用於元素或其父元素的所有屬性變更為其初始值

範例：

Less known but useful features of CSS


<!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>

值：

取消設定：將套用於元素或元素父元素的所有屬性變更為它們的父值（如果它們是可繼承的）或變更為它們的初始值（如果不是）

4. CSS用戶選擇屬性

阻止使用者選擇文字

範例：


<!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>

5. CSS caret-color 屬性

更改文字輸入欄位中遊標（插入符號）的顏色。


<!DOCTYPE html>
<html>
<head>
<style>
.a {
  caret-color: blue;
}

</style>
</head>
<body>

<input class="a" value="bulue">

</body>
</html>

6. CSS text-decoration-skip-ink 屬性

text-decoration-skip-ink CSS 屬性指定當透過線條和底線傳遞字形時如何繪製上劃線和下劃線。

值：

無：

範例：

Less known but useful features of CSS


text-decoration-skip-ink: none;

自動：

範例：

Less known but useful features of CSS


text-decoration-skip-ink: auto;

7.CSS指標事件屬性

pointer-events 屬性定義元素是否對指標事件做出反應。

範例：


<!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>

值：

無：預設
自動：元素不對指標事件做出反應

結論

我們研究了 CSS 鮮為人知的功能。我們了解了對您的應用程式有用的功能。

以上是CSS 鮮為人知但有用的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css less if for while select auto using Property pointer default this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript 控制結構下一篇：JavaScript 控制結構

看更多