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

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

不少人認爲 CSS 的入門門檻較低，因此認真對待和學習的人其實並很少，只要能把項目擼出來，管它呢。

卻不知 CSS 有不少的價值並無被髮揮出來。並且在 CSS 中有不少的技巧幫助咱們更好的實現出想要的效果。

通常狀況下咱們能用 CSS 實現的，儘可能不使用 JS。由於 CSS 的渲染效率要比利用 JS 操做DOM 要高效。

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

1. 不定高的滑動效果

看到上面的效果你會怎麼實現？你的代碼可能會是這樣的。

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

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

若是使用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 來實現這個效果了。簡單方便。

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

4. 設置圖標字符

一般在網頁中若是想代表一個字段是必填項時，咱們都會添加一個小圖標如上圖紅色星號。

<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 content內容生成技術以及應用

代碼地址