前言

隨著前端的不斷發(fā)展，更多新的 CSS 屬性不斷加入提案，本文列舉 5 個不常用但很有用且你見過也可能沒見過的 CSS 屬性，帶大家領(lǐng)略 CSS 之美。

一、position: sticky

不知道大家平時業(yè)務(wù)開發(fā)中有沒有碰到這樣的需求：標(biāo)題在滾動的時候，會一直貼著最頂上。這種場景實際上很多：比如表格的標(biāo)題欄、網(wǎng)站的導(dǎo)航欄、手機通訊錄的人名首字母標(biāo)題等等。如果讓大家自己動手做的話，是不是會用 js 結(jié)合 css 來實現(xiàn)呢？以前確實是這樣的，直到后來 position 屬性新增了一個屬性值 sticky ，前端程序員才迎來了小春天。

css 部分：

.container {
    background-color: oldlace;
    height: 200px;
    width: 140px;
    overflow: auto;
  }
  .container div {
    height: 20px;
    background-color: aqua;
    border: 1px solid;
  }
  .container .header {
    position: sticky;
    top: 0;
    background-color: rgb(187, 153, 153);
}

html 部分：

<div class="container">
  <div class="header">Header</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

就這么簡單？對，就這么簡單，但是使用的時候要注意兼容性。

二、:empty 選擇器

平時開發(fā)的時候數(shù)據(jù)都是通過請求接口獲取的，也會存在接口沒有數(shù)據(jù)的情況。這個時候正常的做法是給用戶一個提示，讓用戶知道當(dāng)前不是出 bug 了，而是確實沒有數(shù)據(jù)。一般的做法是我們?nèi)藶榈呐袛喈?dāng)前數(shù)據(jù)返回列表的長度是否為 0，如果為 0 則顯示一個 “暫無數(shù)據(jù)” 給用戶，反之則隱藏該提示。寫過 Vue 的小伙伴是不是經(jīng)常這么做：

<div>
    <template v-if="datas.length">
        <div v-for="data in datas"></div>
    </template>
    <template v-else>
        <div>暫無數(shù)據(jù)</div>
    </template>
</div>

但是有了 :empty 這個選擇器后，你大可以把這個活交給 CSS 來干:

.container {
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container:empty::after {
    content: "暫無數(shù)據(jù)";
}

通過 :empty 選中內(nèi)容為空的容器，然后通過偽元素為空容器添加提示。是不是非常方便？

三、gap

小伙伴們?nèi)粘ｉ_發(fā)中，都有用過 padding 和 margin 吧，margin 一般用做邊距，讓兩個元素隔開一點距離，但是對于一些場景下，我們很難通過計算得到一個除的盡的值，比如 100px 我要讓 3 個元素等分，且每個元素隔開 10px，這就很尷尬了。
沒關(guān)系！我們可以用 gap 屬性，gap 屬性它適用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。
比如我們要讓每個元素之間隔開 20px， 那么使用 gap 我們可以這樣：

display: flex | grid；
gap: 20px;

四、background-clip: text

這個屬性可能用的不多，有什么用呢？簡單來說就是可以做一個帶背景的文字效果：

大家平時 background-clip 是不是都用來做一些裁切效果？你知道它還有個屬性值是 text 嗎？background-clip: text 用來做帶背景的文字效果，相信大家平時瀏覽一些網(wǎng)站的時候都會看到類似的實現(xiàn)，實際上通過 CSS 我們也能做到這種效果。

五、:invalid 偽類

:invalid 表示任意內(nèi)容未通過驗證的 input 或其他 form 元素。什么意思呢？舉個例子。

<form>
  <label for="url_input">Enter a URL:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">Enter an email address:</label>
  <input type="email" id="email_input" required/>
</form>

我們的需求是讓 input 當(dāng)值有效時，元素顏色為綠色，無效時為紅色。

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #C00000;
}

結(jié)論

本文就到此結(jié)束了，希望大家共同努力，早日拿下 CSS 。

到此這篇關(guān)于五個驚艷一時的CSS屬性的文章就介紹到這了,更多相關(guān)盤點CSS屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論