寫在前面:
這篇文章是本人學習過程中遇到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.