關於 CSS 的零碎知識點

寫在前面：

這篇文章是本人學習過程當中遇到css的零碎知識點2（就是之前本身不知道的），我都記下來了，須要的朋友能夠過來參考下，喜歡的能夠點個贊，但願對你們有所幫助。本文的受衆是前端小白，大手子能夠跳過。

1.scss編譯css文件使用中文註釋出現亂碼：

在文件開頭部分加上：@charset "UTF-8";

注意：這裏必需要加在文件開頭部分，加在文件中部和結尾部分是無效的。

---

2.HTML input標籤的 maxlength 屬性

定義和用法：

maxlength 屬性規定輸入字段的最大長度，以字符個數計。
maxlength 屬性與 input type="text" 或 input type="password" 配合使用。

注意：

這裏所說的以字符個數計算，中文是佔兩個字符，字母和數字都是佔一個字符，可是我實際使用過程當中，input裏面不管中文，英文字母，數字，均可以輸入相同長度，也就是說這是一個bug？？？

我知道沒有圖大家是不會信的

上面是我先前的理解，通過評論區朋友的指點，發現原先的理解事錯的，回來更正一下。

字節不等同於字符，字節不等同於字符，字節不等同於字符，

漢字佔兩個字節，可是隻佔了一個字符，因此屬性沒毛病，是我以前理解錯了

這裏有一個用JS限制文本框所輸入字符串的最大字節數的辦法有興趣能夠看一下：blog.sina.com.cn/s/blog_8156…

ps：其實我也不知道有什麼用，可能有些場景對這些規定的比較死，才能用的到，大家就蠻看一下。。

---

3.背景圖片如何居中：

background：url center no-repeat；只要在這裏加個center就可使背景圖片垂直水平居中了

實際上這裏是用了 background-position屬性。

background-position定義和用法

太多了，放個圖片本身看一看。

4.css樣式最好不要把寬度定死了，這樣會致使頁面縮小的時候超出範圍。

這個問題太low，我就不放栗子了。

說明：當你某個div或者head，body哪裏寬度定死了以後，查看手機自適應的時候，就很容易出現橫向滾動條，是由於頁面縮小以後，你寬度定死的那個部分沒有跟隨其餘部分按照相同比例縮小，雖然那個部分也是縮小了，可是縮小的比例不對。

---

5.字體間距

letter-spacing

全部瀏覽器都支持 letter-spacing 屬性。

蠻看一下，稍微記下，這個仍是蠻偏的

使用場景：有時候留白部分太多，看起來空空蕩蕩的，或者字體太小，不易閱讀，此時可使用這個屬性。容許使用負值，有時候字體之間的距離也會更大，這時使用負值會讓字母之間擠得更緊。

後話：

先記這些，之後學到了新的東西，累積起來，再發一些，這些都是我寫頁面期間遇到的問題，再次強調一下是寫給小白看的，讓他們之後少踩些坑，小白們也多點參考資料。

最後：但願看完的朋友點個喜歡，也能夠關注一下我，如今這階段基本上每月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支持，感激涕零！
ps：目前待業，座標北京，求推薦工做。而後但願我寫哪方面的文章能夠在底下評論，或者是私信我，雖然寫的很差，但我就當這是記錄本身成長的一種方式咯。（前提是我會了，若是不會我也會記下來，等會了的時候再更出來。）
掘金我的主頁 ，簡書主頁連接，csdn博客主頁連接 ，github 。

以上。2017.4.14.