前言

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

一、position: sticky

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

就這么簡(jiǎn)單？對(duì)，就這么簡(jiǎn)單，但是使用的時(shí)候要注意兼容性。

二、:empty 選擇器

平時(shí)開發(fā)的時(shí)候數(shù)據(jù)都是通過請(qǐng)求接口獲取的，也會(huì)存在接口沒有數(shù)據(jù)的情況。這個(gè)時(shí)候正常的做法是給用戶一個(gè)提示，讓用戶知道當(dāng)前不是出 bug 了，而是確實(shí)沒有數(shù)據(jù)。一般的做法是我們?nèi)藶榈呐袛喈?dāng)前數(shù)據(jù)返回列表的長(zhǎng)度是否為 0，如果為 0 則顯示一個(gè) “暫無數(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 這個(gè)選擇器后，你大可以把這個(gè)活交給 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 一般用做邊距，讓兩個(gè)元素隔開一點(diǎn)距離，但是對(duì)于一些場(chǎng)景下，我們很難通過計(jì)算得到一個(gè)除的盡的值，比如 100px 我要讓 3 個(gè)元素等分，且每個(gè)元素隔開 10px，這就很尷尬了。
沒關(guān)系！我們可以用 gap 屬性，gap 屬性它適用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。
比如我們要讓每個(gè)元素之間隔開 20px， 那么使用 gap 我們可以這樣：

display: flex | grid；
gap: 20px;

四、background-clip: text

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

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

五、:invalid 偽類

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

<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)值有效時(shí)，元素顏色為綠色，無效時(shí)為紅色。

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)于五個(gè)驚艷一時(shí)的CSS屬性的文章就介紹到這了,更多相關(guān)盤點(diǎn)CSS屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論