CSS系列之教你幾招小技巧，讓開發更高效

六小登登發表於2019-07-17
CSS

俗話說「人靠衣裝馬靠鞍」，一個網頁的漂亮與否CSS起到了很大的作用。它能夠幫助我們進行美化。因此 CSS 在前端開發中的地位不用多說。

很多人認為 CSS 的入門門檻較低，所以認真對待和學習的人其實並不多，只要能把專案擼出來，管它呢。

殊不知 CSS 有很多的價值並沒有被髮揮出來。而且在 CSS 中有很多的技巧幫助我們更好的實現出想要的效果。

一般情況下我們能用 CSS 實現的，儘量不使用 JS。因為 CSS 的渲染效率要比利用 JS 操作DOM 要高效。

今天分享幾個 CSS 小技巧，幫助你在專案開發的過程簡單、高效的解決問題。

1. 不定高的滑動效果

CSS系列之教你幾招小技巧，讓開發更高效
看到上面的效果你會怎麼實現？你的程式碼可能會是這樣的。

 .box {
    width: 150px;
    height: 20px;
    transition: all 0.5s;
}
.box:hover {
    height: 250px;
}
複製程式碼

看似比較完美，但是有個缺點，就是如果我們的高度不固定，當文字的數量發生變化時。就會出現很多的剩餘空間，顯然不夠友好。

CSS系列之教你幾招小技巧，讓開發更高效
如果使用JS去計算高度好像有點小題大作。那有沒有比較好的實現方式呢？

其實我們可以利用 max-height 屬性去實現不定高度下的滑動效果。

 <div class="box">
    滑鼠懸浮進行滑動滑鼠懸浮進行滑動滑鼠懸...
  </div>
  .box {
    padding: 20px;
    width: 150px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s;
}
.box:hover {
  max-height: 350px;
}
複製程式碼

利用 max-height 的特性，設定一個永遠比內容大的高度，這時元素的高度就是內容的高度，這樣在配合使用 transition 屬性就可以實現過渡效果。

技巧就是，設定一個高度永遠比內容要高。

不過這裡有需要注意的地方是：不能把高度設定的太高，否則會出現「延遲現象」。應該找一個絕對安全且較小的值。小夥伴們不妨去嘗試一下。

2. 不定高的全屏佈局

全屏佈局，你第一想到的就是 height: 100%，可是這裡面有一個坑，就是在高度設定 100% 的時候，父級元素的高度必須有一個固定的高度值，否則是無效的。

如果只是一層巢狀倒也好說，給父元素設定高度即可。但如果是多層級巢狀就會非常麻煩。需要設定很多高度。 比如我們會經常見到這樣的程式碼，目的就是為了子元素可以設定 height: 100%。

html,body {
  height: 100%;
}
複製程式碼

今天介紹一種方法在不定父元素高度的情況下，可以讓元素的 height: 100% 產生效果。那就是給元素加個「絕對定位」屬性。這樣子元素就會充滿整個父容易。

.box {
  position: relative;
  padding: 100px;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
複製程式碼

當然除此之外，我們還可以用另外一種方式實現相同效果。

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
複製程式碼

大家可以想象一下，在什麼場景下使用此方法比較好。其實頁面的 loading 非常適合這種方式實現。不僅僅是全域性的 loading，更適合某個區域性元素的 loading。比如表格重新整理時，在表格中加入loading。

這是方式的好處在於，我們不用關心元素的高度，適用性非常強，小夥伴們不妨去嘗試一下。

3. 動態切換圖片

通常要想實現二個圖片的切換效果，都是兩張圖片的現實隱藏。今天看到這個之後你就可以使用 CSS 來實現這個效果了。簡單方便。

CSS系列之教你幾招小技巧，讓開發更高效

<img class="img-item" src="/head.png">
.img-item {
  width: 200px;
}
.img-item:hover {
  content: url(/gonghao.jpg);
}
複製程式碼

4. 設定圖示字元

CSS系列之教你幾招小技巧，讓開發更高效
通常在網頁中如果想表明一個欄位是必填項時，我們都會新增一個小圖示如上圖紅色星號。

 <label>
    <span>*</span>使用者名稱
    <input type="text" />
</label>
複製程式碼

除了這種方式之外，其實我們可以使用CSS來完成。

<form class="form">
    <label>使用者名稱</label><input type="text" />
    <label>手機號</label><input type="text" />
    <label>郵箱</label><input type="text" />
</form>
//css
.form label:before {
  content: "*";
  color: red;
}
複製程式碼

這樣我們可以更少的使用HTML程式碼，當進行符號的修改時，我們也不必進行多次HTML的更改。

不過 content的屬性和用法遠不止這些，我這裡只是寫了一個最為常見的簡單用法，你可發揮更大的價值。一般固定化格式的都可以很好的利用這一點。而且內容也可以更加豐富多樣。

如果你想了解更多有關 content的內容可以檢視CSS系列】被忽略的content屬性

今天就給大家分享這麼多吧，後續還會繼續給大家帶來更多實用技巧，關注公眾號即可。

如果覺得文章不錯，對你有所啟發，點贊是一種態度也是一種認可。

更多優質文章、更多故事關注微信公眾號：六小登登，拉你進入優質交流群。來這裡一起交流，一起進步。

CSS系列之教你幾招小技巧，讓開發更高效

參考： CSS content內容生成技術以及應用

程式碼地址

相關文章