今天我讲的主题是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了。html
下面来讲一些,我平时比较注意的细节、技术点,和一些你们可能不是很熟悉的知识点。前端
box-sizing主要有两个值content-box和border-box,先看下官方的解释:css3
通俗一点来讲,默认状况下,padding和border是会额外占据空间的,假如元素宽是10px,若是设置了1px border边框,实际的宽就是12px,padding同理。那么这样会致使,布局的宽高很差控制,计算也特别麻烦。因此咱们会给全局的元素用上border-box, 只要设置了宽高,那么border和padding不管怎么变化,元素的宽高都不会变,这样方便布局和计算。web
在布局的时候,好比一些列表页,经常左边是一个固定大小的缩略图,右边剩余部分展现标题,如图bootstrap
那咱们就叫左边固定右边自适应的布局吧,个人方法 100%宽的div用padding-left把左边图片的位置留出来,div元素内容的部分就是标题,图片绝对定位到padding-left区域,这样就实现了左固定右自适应,(前提是box-sizing必须是border-box,不然padding加上100%宽会超出屏幕宽度),大体代码以下:浏览器
伪类before,after的content属性,是用来插入内容的,咱们能够经过attr 传入一个当前元素的属性名,把属性值,载入进伪类内容,这个是一种写法,但实际应用场景可能并很少,就当了解一下吧微信
对于动态输出文字能够不用在乎,某些页面可能会有相似提示文案的地方,用英文标点符号,对于居中效果比较友好。less
布局的时候从上往下开始写页面,通常都是写下一个的元素margin-top来决定和上一个元素的间距,那么就尽可能不要又是写margin-top又是写margin-bottom,若是混着用,后期很差维护,好比某一块区域须要摞位置,或者是一个组件可能会被不少地方共用,混着写的话后期在改的时候,可能会麻烦一点,这里致使的问题能够说不痛不痒,可是无论是js仍是css,注重细节并养成好的习惯,是代码能力的一种体现。dom
有时候设计师,在配置字体颜色的时候可能用透明的百分比,来设置几种不一样的颜色,好比主色是#000,浅灰色#000 80%的透明度,这种状况下不建议web写透明度,而是让设计师给到对应的颜色值,由于透明色会根据背景的不一样,好比如今看到的这种状况,这样扩展性就比较差。
命名是一个让人最纠结的事情,先看第一种,这样命名的更详细能够一目了然的知道当前类的意思,可是长度比较长,增长代码量。
第二种使用缩略命名,会使代码更短,写起来更快,可是不易读。
若是用缩略命名,能够约定文档,有约定和熟悉成本,可是熟悉之后更高效,类的命名也会变得更规范和统一
我以前写边框的时候就发现,只要让边框的颜色更淡,边框看起来就更细,因此当设计师问我为何边框看起来比较粗的时候,我都告诉他们颜色调浅一点就行了,这个技巧我一直在实际使用。网上有博客说经过css3 transform的缩放scale 50%,能够实现0.5px边框,我一直很奇怪,1px实际是物理的最小单位,怎么可能实现0.5px,就这样我作了个实验,我设置了1px颜色为000的边框(黑色),如图,
当我使用scale缩放50%的时候,颜色变成了c5c5c5,可是实际仍然有1px。如图,
我用的是拾色工具会精确到像素,确实仍是1px,因此这种方式并不能实现0.5px而是颜色变浅了。还有些手机屏幕上1px是按照2px来的展现,因此这种方式可让2px缩放为1px,让1px的边框变得更淡,这种方式确实能让边框变细,但不能说是0.5px。
该属性让区域内容没法被选中,能够阻止用户长按复制,也能够避免用户复制无关内容,好比下面我只但愿用户复制6655验证码,除了6655我都设置了user-select:none,长按其余部分并不会出现复制按钮,按钮数字就能够,而且第三幅图的左右下标只能在6655间拖动
在为dom绑定事件的时候,你们可能会直接绑定当前有样式的class,这样会由于修改或者替换class名称,影响JS,而若是定义一个无样式的js前缀的类 专门用来绑定事件,这样就解除了样式和逻辑的耦合,在读代码的时候,也能一会儿看出哪些元素绑定了事件的。
好吧,这是我本身命名的,咱们先看下第一种写法,这很常规,全部样式写在一个class里
再看下第二种,定义一个公共类,经过less在样式里直接引入这个类,第二种效率会高一点(少写几个字母),可是须要熟悉和维护公共类
再看第三种,把公共类写在元素的class里,这一种比较灵活,好比我如今要写两个item的元素,一个左浮动,一个右浮动,那么这种就能不改动item,而直接使用不一样的类实现不一样的样式,就像JS的代码去重同样,传入一个不一样的参数进行区分,同样的地方共用。
第四种公共类所有写在元素里, 在写dom的时候都不用去写css了,直接把想要的类写进dom,是否是有点像JS里的组件化,这种写法在特定状况下比较高效,好比PC后台类项目,对UI要求不高,就比较适合,这个高效也取决于公共class类是否全面,对项目中的class是否熟悉,可是也要注意不要让元素的长度太长,尽可能保持在4个类之内,超出的话就不该该用这种写法。
这四种写法其实均可以,在一个项目中,针对不一样的部分均可以用不一样的写法,能够很是灵活的选择想要的方式。
你们都知道浏览器通常不会让文字小于12px,若是设置小于12px浏览器都会显示12px, 咱们在用到rem布局的时候,元素是会根据屏幕宽度等比例缩放的,好比设计师给到750px的设计稿,若是某一个元素文字是22px,那么当用户的屏幕宽度是375的时候,文字会缩放为11px,实际浏览器就会显示为最小12像素,那么其余非字体元素比例仍然会缩小,这个时候字体可能和其余元素的比例就不是原设计稿的比例了,若是用户屏幕是320px,那么和原设计稿元素间的比例就差更多了。因此咱们必定要根据本身的状况告诉设计师,在宽是750像素的设计稿里,字体最小应该是多少像素。
咱们在作列表页的时候,图片都是固定的大小,好比是一个100px*100px的正方形图片,可是颇有可能拿到的图片并非正方形的,这个非正方形图片放到正方形的img标签里,就会变形若是使用object-fit:cover 能够裁剪超出比例的部分,这样图片看起来就不会是变形或者拉伸的了,可是这样会致使图片残缺,根据图片的不一样,可能裁剪掉关键部分的内容,可是鉴于列表原本就是缩略图,因此仍是能够加上这个属性的,是一个比较折中的办法。
说到图片拉伸的问题, 就要说说对于图片的约定,由于无论是拉伸仍是裁剪都会致使图片的残疾,拉伸影响视觉,裁剪惧怕关键部位丢失,若是不严格按照约定的规范来,确定是不能兼容全部状况的,所以在作项目的一开始就要和产品运营们约定好图片比例,建议约定为正方形。
总得来讲,学好css,须要长期推敲,长期注重和完善代码的细节,在每一次项目实战中,抽出一点点时间优化、尝试,日积月累成为我的的体系,
我的的风格。这种体系和风格,通常来讲你本身都习惯了,会习觉得常,甚至总结的时候都不知道应该说什么,可是当你去维护或者看别人的代码的时候,你就能体会出,
原来这个地方别人可能会这样用,你提出本身的看法,就能对团队和周围的同事产生好的影响,若是本身的有问题同事指出来,也能够反过来,提高本身的认识。
要作好css,写好页面,和设计师的沟通也是很重要的一个技能,由于设计师决定页面最终要呈现的样子,要经过项目验收,也必需要设计师验收经过才行。
情景1:
设计师给过来一个交互效果,前端拿到,一想交互效果还能够,可是实现成本比较高,功能都作不完,不想作这么细,而后就直接说没时间这个作不了,设计师一想这个交互很难吗,别人都能作,你为何不作,就这样来回几句就闹矛盾了,闹到产品那里去了,最后可能交互效果还得作,时间也耽误了。其实这个是不少前端会遇到的问题,时间压得紧,功能可能都要延期,还来作这些交互,天然会有点抱怨,情绪一上来,把产品和设计都得罪了,最后仍是要作,长此以往矛盾愈来愈深,沟通就愈来愈困难。 换个思路想问题,设计师大部分时候时间也很紧,要对产品和设计领导有所交代,前端又在催,好不容易作出来了,你这也不能实现那也不能实现,你这样我也无法交代啊。那么咱们换个沟通方式,好比这样说:咱们这边时间确实有点紧,这个交互比较麻烦,比较费时间,我作是能够作,只是可能会影响项目进度,你看要不我先作简单点,等到提测的时候有时间再加上这个交互,实在不行能不能等到上线以后,我单独再优化一下这个地方,很快就能上线。
设计师们仍是讲道理的,根据web上的一些特性,设计师设计出来的一些样式一些想法或许无法实现,又或者实现成本过高,咱们就得说服他们这个地方为何不能实现,由于他们不懂,因此惧怕你忽悠他们(实际有时候就有人忽悠他们),因此要想说服别人,本身必定要把问题搞清楚,把知识点理清楚,不能实现的理由对设计师说清楚,而且要有理有据,同时最好网上找到相关博客或者官方解释进行佐证。有不少矛盾和问题,就在于咱们疏忽了沟通,又或者说是咱们本身偷懒了,其实当本身把知识点能给外行说清楚了,这也说明是理解透了,也是对本身能力的提高。设计师辛苦设计的稿子必定要尽可能达到他们的效果,也要考虑扩展性和可实现性,态度很重要,不要让人以为是在敷衍他们,什么是敷衍,不解释清楚就说不作,就是敷衍,不然碰一鼻子灰只有怪本身。技术点要搞清楚,要不解释不清楚,别人不买单,在发现设计稿有问题的时候,耐心提醒其中一些不合适的地方,多帮别人承担一点,前端和设计师要友好相处。
不要兼容IE低版本(我以为兼容11以上就好了),特别是创业公司,对创业公司来讲,性价比极低,自己创业公司没技术、没沉淀、活下去都是一个问题,兼容IE就是甚至浪费人力成本,好比说IE8不支持圆角,得用图片代替,
没有placeholder,得用JS来模拟。对于我的来讲,技术的更新换代是大势所趋,咱们要往前看,有的是东西给你学,不要在这个地方浪费青春。
有空你们都去看看bootstrap源码,看一些核心的部分就够了,好比变量variable等一些最经常使用的部分,源码其实不难,能获得不少启发。