关于 CSS 的零碎知识点

2,721 阅读3分钟

写在前面:

这篇文章是本人学习过程中遇到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.