欲练JS，必先攻CSS——前端修行之路

清疚 2022-12-28 07:24 120阅读 0赞

今天我讲的主题是css，具体聊一下我大概的css学习历史，分享一些干货，希望这次分享对大家有所启发和帮助。

个人的css历史

说说自己的css学习的历史，12年，当时是老师手把手1对1教我div+float的固定布局，所有元素全部用float，做了学生会网站的全部前端页面，因为有段时间学PS比较多，也是自己做的UI，很丑，老师说第一次做成这样很不错了，那时老师就觉得我有做前端的天赋，我就是从这个时候开始接触前端的。毕业设计自己一个人做了一个全栈的web，做完整个毕业设计后，我就决定出来要做前端，感觉自己更喜欢。14年出来工作，那时候还不会用什么less，就是直接写css，那时候主要还是写固定布局的pc页面，14年底自己在项目里折腾，用了一下JQmobile，超级难用。15年做一个移动端项目的时候，调研了几个css库，学习了bootstrap和它部分源码，还用到了webfont，使用流式布局这一次提升很大再后来学习了rem，并用到了项目中，至此我的css就到了一个缓慢成长期，或者说就没有特意学习css了。

干货

下面来说一些，我平时比较注意的细节、技术点，和一些大家可能不是很熟悉的知识点。

1.box-sizing: border-box

box-sizing主要有两个值content-box和border-box，先看下官方的解释：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
通俗一点来说，默认情况下，padding和border是会额外占据空间的，假如元素宽是10px，如果设置了1px border边框，实际的宽就是12px，padding同理。那么这样会导致，布局的宽高不好控制，计算也特别麻烦。所以我们会给全局的元素用上border-box， 只要设置了宽高，那么border和padding无论怎么变化，元素的宽高都不会变，这样方便布局和计算。  
![在这里插入图片描述][2020121514261686.png]  
2.左边固定 右边自适应

在布局的时候，比如一些列表页，常常左边是一个固定大小的缩略图，右边剩余部分展示标题，如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]  
那我们就叫左边固定右边自适应的布局吧，我的方法 100%宽的div用padding-left把左边图片的位置留出来，div元素内容的部分就是标题，图片绝对定位到padding-left区域，这样就实现了左固定右自适应，（前提是box-sizing必须是border-box，否则padding加上100%宽会超出屏幕宽度），大致代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
3.伪类的 content attr

伪类before,after的content属性，是用来插入内容的，我们可以通过attr 传入一个当前元素的属性名，把属性值，载入进伪类内容，这个是一种写法，但实际应用场景可能并不多，就当了解一下吧  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]  
4.中文符号居中效果

对于动态输出文字可以不用在意，某些页面可能会有类似提示文案的地方，用英文标点符号，对于居中效果比较友好。  
![在这里插入图片描述][20201215142708308.png]  
5.元素的上下间距

布局的时候从上往下开始写页面，一般都是写下一个的元素margin-top来决定和上一个元素的间距，那么就尽量不要又是写margin-top又是写margin-bottom，如果混着用，后期不好维护，比如某一块区域需要摞位置，或者是一个组件可能会被很多地方共用，混着写的话后期在改的时候，可能会麻烦一点，这里导致的问题可以说不痛不痒，但是不管是js还是css，注重细节并养成好的习惯，是代码能力的一种体现。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]  
6.字体颜色透明

有时候设计师，在配置字体颜色的时候可能用透明的百分比，来设置几种不同的颜色，比如主色是\#000，浅灰色\#000 80%的透明度，这种情况下不建议web写透明度，而是让设计师给到对应的颜色值，因为透明色会根据背景的不同，比如现在看到的这种情况，这样扩展性就比较差。  
![在这里插入图片描述][2020121514273087.png]  
7.命名

命名是一个让人最纠结的事情，先看第一种,这样命名的更详细可以一目了然的知道当前类的意思，但是长度比较长，增加代码量。  
![在这里插入图片描述][20201215142856408.png]  
第二种使用缩略命名，会使代码更短，写起来更快，但是不易读。  
![在这里插入图片描述][20201215142906444.png]  
如果用缩略命名，可以约定文档，有约定和熟悉成本，但是熟悉以后更高效，类的命名也会变得更规范和统一  
![在这里插入图片描述][20201215142938631.png]  
8. 0.5px边框的理解误区

我之前写边框的时候就发现，只要让边框的颜色更淡，边框看起来就更细，所以当设计师问我为什么边框看起来比较粗的时候，我都告诉他们颜色调浅一点就好了，这个技巧我一直在实际使用。网上有博客说通过css3 transform的缩放scale 50%，可以实现0.5px边框，我一直很奇怪，1px实际是物理的最小单位，怎么可能实现0.5px，就这样我做了个实验，我设置了1px颜色为000的边框（黑色）,如图，  
![在这里插入图片描述][20201215142949225.png]  
当我使用scale缩放50%的时候，颜色变成了c5c5c5，但是实际仍然有1px。如图，  
![在这里插入图片描述][20201215142959633.png]  
我用的是拾色工具会精确到像素，确实还是1px，所以这种方式并不能实现0.5px而是颜色变浅了。还有些手机屏幕上1px是按照2px来的展示，所以这种方式可以让2px缩放为1px，让1px的边框变得更淡，这种方式确实能让边框变细，但不能说是0.5px。

9.user-select:none

该属性让区域内容无法被选中,可以阻止用户长按复制,也可以避免用户复制无关内容，比如下面我只希望用户复制6655验证码，除了6655我都设置了user-select:none，长按其他部分并不会出现复制按钮，按钮数字就可以，并且第三幅图的左右下标只能在6655间拖动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]  
10.js-class

在为dom绑定事件的时候，大家可能会直接绑定当前有样式的class，这样会因为修改或者替换class名称，影响JS，而如果定义一个无样式的js前缀的类 专门用来绑定事件，这样就解除了样式和逻辑的耦合，在读代码的时候，也能一下子看出哪些元素绑定了事件的。  
![在这里插入图片描述][20201215143031814.png]  
11.公共类组合写法

好吧，这是我自己命名的，我们先看下第一种写法，这很常规，所有样式写在一个class里

![在这里插入图片描述][20201215143041874.png]  
再看下第二种，定义一个公共类，通过less在样式里直接引入这个类，第二种效率会高一点（少写几个字母），但是需要熟悉和维护公共类  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 6]  
再看第三种，把公共类写在元素的class里，这一种比较灵活，比如我现在要写两个item的元素，一个左浮动，一个右浮动，那么这种就能不改动item，而直接使用不同的类实现不同的样式，就像JS的代码去重一样，传入一个不同的参数进行区分，一样的地方共用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 7]  
第四种公共类全部写在元素里， 在写dom的时候都不用去写css了，直接把想要的类写进dom，是不是有点像JS里的组件化，这种写法在特定情况下比较高效，比如PC后台类项目，对UI要求不高，就比较适合，这个高效也取决于公共class类是否全面，对项目中的class是否熟悉，但是也要注意不要让元素的长度太长，尽量保持在4个类以内，超出的话就不应该用这种写法。  
![在这里插入图片描述][20201215143114215.png]  
这四种写法其实都可以，在一个项目中，针对不同的部分都可以用不同的写法，可以非常灵活的选择想要的方式。

12.rem布局的文字大小

大家都知道浏览器一般不会让文字小于12px，如果设置小于12px浏览器都会显示12px， 我们在用到rem布局的时候，元素是会根据屏幕宽度等比例缩放的，比如设计师给到750px的设计稿，如果某一个元素文字是22px，那么当用户的屏幕宽度是375的时候，文字会缩放为11px，实际浏览器就会显示为最小12像素，那么其他非字体元素比例仍然会缩小，这个时候字体可能和其他元素的比例就不是原设计稿的比例了，如果用户屏幕是320px，那么和原设计稿元素间的比例就差更多了。所以我们一定要根据自己的情况告诉设计师，在宽是750像素的设计稿里，字体最小应该是多少像素。  
![在这里插入图片描述][20201215143125152.png]  
13.object-fit: cover

我们在做列表页的时候，图片都是固定的大小，比如是一个100px\*100px的正方形图片，但是很有可能拿到的图片并不是正方形的，这个非正方形图片放到正方形的img标签里，就会变形如果使用object-fit：cover 可以裁剪超出比例的部分，这样图片看起来就不会是变形或者拉伸的了，但是这样会导致图片残缺，根据图片的不同，可能裁剪掉关键部分的内容，但是鉴于列表本来就是缩略图，所以还是可以加上这个属性的,是一个比较折中的办法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 8]  
14.图片的约定

说到图片拉伸的问题, 就要说说对于图片的约定，因为不管是拉伸还是裁剪都会导致图片的残疾，拉伸影响视觉，裁剪害怕关键部位丢失，如果不严格按照约定的规范来，肯定是不能兼容所有情况的，因此在做项目的一开始就要和产品运营们约定好图片比例，建议约定为正方形。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】  
> 每天更新最新技术文章干货。

小结

总得来说，学好css，需要长期推敲，长期注重和完善代码的细节，在每一次项目实战中，抽出一点点时间优化、尝试，日积月累成为个人的体系，

个人的风格。这种体系和风格，一般来说你自己都习惯了，会习以为常，甚至总结的时候都不知道应该说什么，但是当你去维护或者看别人的代码的时候，你就能体会出，

原来这个地方别人可能会这样用，你提出自己的见解，就能对团队和周围的同事产生好的影响，如果自己的有问题同事指出来，也可以反过来，提升自己的认识。

和设计师。。。

要做好css，写好页面，和设计师的沟通也是很重要的一个技能，因为设计师决定页面最终要呈现的样子，要通过项目验收，也必须要设计师验收通过才行。

情景1：

设计师给过来一个交互效果，前端拿到，一想交互效果还可以，但是实现成本比较高，功能都做不完，不想做这么细，然后就直接说没时间这个做不了，设计师一想这个交互很难吗，别人都能做，你为什么不做，就这样来回几句就闹矛盾了，闹到产品那里去了，最后可能交互效果还得做，时间也耽误了。其实这个是很多前端会遇到的问题，时间压得紧，功能可能都要延期，还来做这些交互，自然会有点抱怨，情绪一上来，把产品和设计都得罪了，最后还是要做，久而久之矛盾越来越深，沟通就越来越困难。换个思路想问题，设计师大部分时候时间也很紧，要对产品和设计领导有所交代，前端又在催，好不容易做出来了，你这也不能实现那也不能实现，你这样我也没法交代啊。那么我们换个沟通方式，比如这样说：我们这边时间确实有点紧，这个交互比较麻烦，比较费时间，我做是可以做，只是可能会影响项目进度，你看要不我先做简单点，等到提测的时候有时间再加上这个交互，实在不行能不能等到上线之后，我单独再优化一下这个地方，很快就能上线。

设计师们还是讲道理的，根据web上的一些特性，设计师设计出来的一些样式一些想法或许没法实现，又或者实现成本太高，我们就得说服他们这个地方为什么不能实现，因为他们不懂，所以害怕你忽悠他们（实际有时候就有人忽悠他们），所以要想说服别人，自己一定要把问题搞清楚，把知识点理清楚，不能实现的理由对设计师说清楚，并且要有理有据，同时最好网上找到相关博客或者官方解释进行佐证。有很多矛盾和问题，就在于我们疏忽了沟通，又或者说是我们自己偷懒了，其实当自己把知识点能给外行说清楚了，这也说明是理解透了，也是对自己能力的提升。设计师辛苦设计的稿子一定要尽量达到他们的效果，也要考虑扩展性和可实现性，态度很重要，不要让人觉得是在敷衍他们，什么是敷衍，不解释清楚就说不做，就是敷衍，否则碰一鼻子灰只有怪自己。技术点要搞清楚，要不解释不清楚，别人不买单，在发现设计稿有问题的时候，耐心提醒其中一些不合适的地方，多帮别人承担一点，前端和设计师要友好相处。

再随便聊聊

不要兼容IE低版本（我觉得兼容11以上就行了），特别是创业公司，对创业公司来说，性价比极低，本身创业公司没技术、没沉淀、活下去都是一个问题，兼容IE就是甚至浪费人力成本，比如说IE8不支持圆角，得用图片代替，

没有placeholder，得用JS来模拟。对于个人来说，技术的更新换代是大势所趋，我们要往前看，有的是东西给你学，不要在这个地方浪费青春。

有空大家都去看看bootstrap源码，看一些核心的部分就够了，比如变量variable等一些最常用的部分，源码其实不难，能得到很多启发。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221120/892fc2700865445680d75d856247a0ba.png
[2020121514261686.png]: /images/20221120/7a1d9ceff0db42438e33890379237c4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: /images/20221120/7ebd85754e75465896314797e2ad4565.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201215142642641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201215142653531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[20201215142708308.png]: https://img-blog.csdnimg.cn/20201215142708308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201215142718645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[2020121514273087.png]: https://img-blog.csdnimg.cn/2020121514273087.png
[20201215142856408.png]: https://img-blog.csdnimg.cn/20201215142856408.png
[20201215142906444.png]: https://img-blog.csdnimg.cn/20201215142906444.png
[20201215142938631.png]: https://img-blog.csdnimg.cn/20201215142938631.png
[20201215142949225.png]: https://img-blog.csdnimg.cn/20201215142949225.png
[20201215142959633.png]: https://img-blog.csdnimg.cn/20201215142959633.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201215143020968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[20201215143031814.png]: https://img-blog.csdnimg.cn/20201215143031814.png
[20201215143041874.png]: https://img-blog.csdnimg.cn/20201215143041874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201215143052549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201215143104294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70
[20201215143114215.png]: https://img-blog.csdnimg.cn/20201215143114215.png
[20201215143125152.png]: https://img-blog.csdnimg.cn/20201215143125152.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201215143136873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA==,size_16,color_FFFFFF,t_70