关于css的零碎知识点

写在前面：

这篇文章是本人学习过程中遇到css的零碎知识点2（就是以前自己不知道的），我都记下来了，需要的朋友可以过来参考下，喜欢的可以点个赞，希望对大家有所帮助。本文的受众是前端小白，大手子可以跳过。

1.scss编译css文件使用中文注释出现乱码：

在文件开头部分加上：@charset “UTF-8”;

注意：这里必须要加在文件开头部分，加在文件中部和结尾部分是无效的。

---

2.HTML input标签的 maxlength 属性

定义和用法：

maxlength 属性规定输入字段的最大长度，以字符个数计。 maxlength 属性与 input type=”text” 或 input type=”password” 配合使用。

注意：

这里所说的以字符个数计算，中文是占两个字符，字母和数字都是占一个字符，但是我实际使用过程中，input里面无论中文，英文字母，数字，都可以输入相同长度，也就是说这是一个bug？？？

这里有一个用JS限制文本框所输入字符串的最大字节数的办法有兴趣可以看一下：http://blog.sina.com.cn/s/blog_815611fb0101jkah.html

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.