關於 CSS 的零碎知識點

OBKoro1發表於2019-02-20

寫在前面:

這篇文章是本人學習過程中遇到css的零碎知識點2(就是以前自己不知道的),我都記下來了,需要的朋友可以過來參考下,喜歡的可以點個贊,希望對大家有所幫助。本文的受眾是前端小白,大手子可以跳過。

1.scss編譯css檔案使用中文註釋出現亂碼:

關於 CSS 的零碎知識點

在檔案開頭部分加上:@charset "UTF-8";

注意:這裡必須要加在檔案開頭部分,加在檔案中部和結尾部分是無效的。


2.HTML input標籤的 maxlength 屬性

定義和用法:

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

注意:

這裡所說的以字元個數計算,中文是佔兩個字元,字母和數字都是佔一個字元,但是我實際使用過程中,input裡面無論中文,英文字母,數字,都可以輸入相同長度,也就是說這是一個bug???

關於 CSS 的零碎知識點
我知道沒有圖你們是不會信的

關於 CSS 的零碎知識點

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

位元組不等同於字元,位元組不等同於字元,位元組不等同於字元,

漢字佔兩個位元組,但是隻佔了一個字元,所以屬性沒毛病,是我之前理解錯了

這裡有一個用JS限制文字框所輸入字串的最大位元組數的辦法有興趣可以看一下:blog.sina.com.cn/s/blog_8156…

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


3.背景圖片如何居中:

background:url center no-repeat;只要在這裡加個center就可以使背景圖片垂直水平居中了

關於 CSS 的零碎知識點

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

background-position定義和用法

關於 CSS 的零碎知識點
太多了,放個圖片自己看一看。

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

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

說明:當你某個div或者head,body哪裡寬度定死了之後,檢視手機自適應的時候,就很容易出現橫向滾動條,是因為頁面縮小之後,你寬度定死的那個部分沒有跟隨其他部分按照相同比例縮小,雖然那個部分也是縮小了,但是縮小的比例不對。


5.字型間距

letter-spacing

所有瀏覽器都支援 letter-spacing 屬性。

關於 CSS 的零碎知識點

蠻看一下,稍微記下,這個還是蠻偏的

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

後話:

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

最後:希望看完的朋友點個喜歡,也可以關注一下我,現在這階段基本上每個月都不會少於十五篇文章(看到乾貨我也會進行分享)。碼字不易,感謝支援,感激不盡!
ps:目前待業,座標北京,求推薦工作。然後希望我寫哪方面的文章可以在底下評論,或者是私信我,雖然寫的不好,但我就當這是記錄自己成長的一種方式咯。(前提是我會了,如果不會我也會記下來,等會了的時候再更出來。)
掘金個人主頁簡書主頁連結csdn部落格主頁連結github

以上。2017.4.14.

相關文章