今天说说css。我就说说我大概的CSS学习历程，分享一些干货。希望这次分享能给大家带来启发和帮助。个人的css历史先说说我的css学习史吧。12年，老师一对一教我div+float固定布局。我花了很多时间学习PS，UI也是自己做的，非常难看。老师说第一次做很不错。当时老师觉得我有做前端的天赋。也是从这个时候开始接触前端的。我自己为我的毕业设计制作了一个全栈网络。做完了整个毕业设计，决定出来做前端，感觉自己更喜欢。我是2014年开始工作的，那个时候不知道怎么用less。我直接写了css。那时候主要是写布局固定的PC页面。2014年底，在项目中折腾，用了一段时间JQmobile，超级难用。2015年做手机项目的时候，考察了几个css库，学习了bootstrap和它的一些源码，也用过webfont。这次使用流体布局有了很大的改进。后来学习了rem，在项目中使用。到现在为止，我的css已经到了一个缓慢成长的时期，或者说我没有刻意去学习css。说点干货，平时比较关注的细节，技术点，还有一些大家可能不是很熟悉的知识点。1.box-sizing：border-boxbox-sizing主要有两个值：content-box和border-box。先看官方解释：一般来说，默认情况下padding和border会额外占用空间。如果元素宽度为10px，如果设置了1px的border边框，则实际宽度为12px，padding相同。那么这样就会导致布局的宽高控制不好，计算特别麻烦。所以我们将为全局元素使用border-box。只要设置好宽高，无论border和padding怎么变化，元素的宽高都不会改变，方便布局和计算。2.当布局固定在左边，右边自适应时，比如有些列表页，往往左边是固定大小的缩略图，右边剩下的部分显示标题，如如图所示，那么我们称之为固定左右自适应的布局，我的。方法100%宽div使用padding-left离开左边图片的位置，div元素内容为标题，图片绝对定位在padding-left区域，这样左边固定，右边是自适应的。（前提是box-sizing必须是border-box，否则padding加上100%width会超过屏幕宽度），大概代码如下：3.伪类contentattr伪类的content属性before和after用于插入内容，我们可以通过attr传入当前元素的属性名，将属性值加载到伪类内容中。这是一种写法，但实际应用场景可能不多，了解一下吧。4、中文符号居中效果是为了动态输出不用关心文字，有些页面可能会有类似的文字提示，使用英文标点符号，对居中效果比较友好。5、布局元素上下间距时，页面从上到下书写。一般写下一个元素的margin-top是为了判断与上一个元素的距离，所以尽量不要写margin-top再写margin-bottom，如果混用，后期维护起来会比较困难，比如某个区域需要堆叠，或者一个组件可能被很多地方共用，如果是混用的话，后面改的时候可能会有点麻烦，这个问题可以说是无伤大雅，但是不管是js还是css，注重细节，养成良好的习惯，都是编码能力的体现。6、字体颜色透明有时设计者在配置字体颜色时，可能会使用透明百分比来设置几种不同的颜色。例如主色#000，浅灰色#000透明度为80%。这种情况不建议在web上写透明，而是让设计者给出对应的颜色值，因为透明的颜色会根据背景不同而不同，比如你现在看到的这种情况，所以可扩展性比较差。7.命名命名是最纠结的事情。我们先看第一个。这样可以通过更详细的命名，一眼就知道当前类的含义，但是长度比较长，增加了代码量。第二种使用缩写名称，这使得代码更短、编写起来更快，但可读性较差。如果使用缩写名，可以在文档上约定俗成，有约定和熟悉的代价，但熟悉后效率会更高，类的命名也会更加规范和统一。8.对0.5px边框的误解。只要让边框更亮，边框看起来更细，所以当设计师问我为什么边框看起来更粗时，我告诉他们只要让它更亮，这是我一直在使用的技巧。网上有博客说0.5px的边框可以通过缩放50%的css3变换来实现。我一直很惊讶。1px其实是物理上最小的单位。怎么可能做到0.5px呢？所以我做了一个实验，我设置了1px的边框（黑色），颜色为000，如图，当我用scale缩放50%的时候，颜色变成了c5c5c5，但是实际还是有1px。如图，我用拾色器工具精确到像素，确实是1px，所以这个方法不能做到0.5px，颜色变淡了。也有一些手机屏幕1px是按照2px显示的，所以这个方法可以把2px缩放到1px，让1px的边框变浅。这种方法确实可以让边框变细，但是不能说是0.5px。9.user-select:none这个属性防止区域的内容被选中，防止用户长按复制，也防止用户复制不相关的内容。比如我只希望用户复制下面的6655验证码。我设置了user-select:none，其他部分长按不出现复制按钮，按钮号没问题，第三张图左右下标只能在6655之间拖动10.当js-class为dom绑定事件，可以直接绑定当前带样式的类，会通过修改或替换类名影响JS，如果定义一个带非样式js前缀的类专门用于绑定事件，会去掉样式和逻辑.耦合，在阅读代码的时候，也能一眼看出哪些元素绑定了事件。11.public类组合写法 嗯，这个是自己起的，先看第一种写法，很常用，所有样式都写在一个类里再看第二种，定义一个publicclass类，通过less直接在style中引入这个类，第二种方法效率会更高（少写几个字母），但是需要熟悉和维护public类，再看第三种方法，写的publicclassintheclassoftheelement，这个比较灵活。比如我现在要写两个item元素，一个向左浮动，一个向右浮动。那么这个可以直接使用不同的类实现不同的样式，而不需要改变item，就像JS代码去重一样，传入一个不同的参数来区分，同一个地方共享。第四种public类全部写在element中。写dom的时候，不用写css。你可以直接把想要的类写到dom中。是不是有点像JS中的组件化？这种写法在某些情况下使用起来效率更高，比如PC后台项目，对UI要求不高的就比较适合。这个效率也取决于公共类是否全面，是否熟悉项目中的类，但也要注意元素的长度不要太长。尽量保持在4类以内，超过了就不要用这种写法了。其实这四种写法都是可以的。在一个项目中，不同的部分可以采用不同的书写方式，你可以非常灵活地选择自己想要的方式。12、rem布局中文字的大小。大家都知道浏览器一般不允许小于12px的文字。如果设置小于12px，浏览器会显示12px。当我们使用rem布局时，元素会根据屏幕宽度按比例缩放。比如设计师给出一个750px的设计稿，如果某个元素的文字是22px，那么当用户屏幕宽度为375时，文字会被缩放到11px，实际浏览器会显示为最小为12像素，那么其他非字体元素的比例还是会降低。这时候字体和其他元素的比例可能不是原来设计稿的比例。如果用户的屏幕是320px，原设计稿的元素之间的比例会更差。因此，我们必须根据自己的情况告诉设计师，在宽度为750像素的设计稿中，最小字号应该是多少像素。13.object-fit:cover我们在做列表页的时候，图片是固定大小的，比如一张100px*100px的正方形图片，但是很有可能得到的图片不是正方形的，这个非正方形的图片放在正方形的img标签中，它会变形。如果使用object-fit:cover，可以将超出比例的部分裁剪掉，这样图片看起来不会变形或者拉伸，但是这样会导致图片不完整，视图片而定，可能会把内容的关键部分切掉，但是由于列表本来就是缩略图，所以还是可以加上这个属性，算是比较妥协的一种方法。14.图片一致性说到图片拉伸就不得不说说图片一致性，因为拉伸和裁剪都会导致画面残缺，拉伸影响视觉，裁剪怕丢失关键部分。如果不严格遵守约定的规范，肯定不能兼容所有情况。所以在立项之初，一定要和产品运营商就图片的比例达成一致。建议约定一个正方形。总结总的来说，学好CSS需要长期的推敲，长期关注和完善代码的细节。在每一个实际项目中，花一点时间去优化和尝试，日积月累，成为个人的系统，个人的风格。一般来说，你习惯了这种系统和风格，你就会习惯，总结的时候你甚至不知道该说什么，但是当你维护或者看别人的代码时，你可以体会到这个其他人可能会以这种方式使用它。当你提出自己的意见时，你可以对你周围的团队和同事产生良好的影响。如果有问题的同事指出来，你也可以反过来提高自己的理解。和设计师。..做好css，写出好的页面，和设计师沟通也是一个很重要的技能，因为设计师决定了页面最后的样子。要通过项目验收，设计师也必须通过验收。场景一：设计师给一个交互效果，前端搞定。交互效果还可以，但是实现成本比较高，功能做不完。我不想说得那么详细。老师想了想，这个互动是不是有难度。其他人可以做到。你为什么不这样做？来来回回几句，就发生了冲突，麻烦就到产品上去了。可能交互效果还要做，耽误了时间。.其实这是很多前端都会遇到的问题。时间紧迫，活动可能要延期。如果你要做这些互动，你自然会抱怨一些。随着时间的推移，矛盾会越来越深，沟通也会越来越困难。以不同的方式思考问题。大多数时候，设计师的时间很紧。他们要跟产品和设计负责人交代，前端在催促他们。我无法解释。那我们换个沟通方式，比如：我们这边时间真的很紧，这个交互比较麻烦，比较费时，我可以，但是可能会影响项目的进度，你看，我呢先简单点，等我有时间在测试上线的时候加上这个交互，实在不行。这个地方上线后能不能单独优化一下，马上就上线了。设计师还是有道理的。根据网络上的一些特点，设计师设计的一些风格和想法可能无法实现，或者实现成本过高。我们要说服他们为什么这个地方不能实现，因为他们不明白，所以我怕你糊弄他们（事实上，有时候有人糊弄他们），所以如果你想说服别人，你必须弄清楚问题，理清知识点，向设计者解释不能实现的原因，讲道理。有证据，同时在网上可以找到相关的博客或者官方的解释来佐证。有很多矛盾和问题是因为我们忽视了沟通，或者是我们懒惰。其实，当我们能把知识点讲清楚给外行听，也说明我们理解透彻，能力提高了。设计师要尽量达到设计师设计的草稿效果，还要考虑可扩展性和可实现性。态度很重要。不要让人觉得他们敷衍了事。什么是敷衍？敷衍了事，不然摸了鼻子只会怪自己。技术点一定要说清楚，否则解释不清，别人不买单。当你发现设计稿有问题时，耐心提醒一些不合适的地方，多帮助别人承担。前端和设计师一定要相处融洽。随便聊聊，不要兼容低版本的IE（我觉得兼容11以上就可以了），尤其是创业公司。兼容IE甚至是浪费人力成本。比如IE8不支持圆角，只好用图片代替，没有占位符，只好用JS模拟。对于个人而言，技术升级是大势所趋。我们要向前看，有值得你学习的地方，别把青春浪费在这个地方。大家有时间的话应该看看bootstrap源码。看一些核心部分就够了，比如变量和一些最常用的部分。源码其实并不难，可以得到很多启发。
