css使用技巧

当你们设计不够给力的时候,以下的css 技巧能够有效的帮助你提高工作效率.

一 尽量减少重复的代码

　　+ 当某些值相互依赖时,需要把这种关系表示出来.

　　　　如: font-size 和line-height 之间的关系

　　　　　  em 为单位,适用于父的字号大小,但是需要注意的一点并不是所有的效果都需要跟着组件变化.

　　　　　  %为单位,表现与父盒子之间的关系.

　　　　　  rem 为单位,结合媒体查询,适用于移动端适配.

　　+ 代码易维护 VS. 代码量, 两者不可兼得

　　　　如: { border-width: 1px 0 1px 1px } => {border-width:1px; border-left-widht:0} 后者比前者易维护,但是多一行代码, 我更习惯用后者.

　　+ currentColor 颜色 ,

　　　　    currentColor颜色可以保持和文本颜色一致的颜色.

　　+继承   

　　　　   inherit 关键字,对于 input select button 表单元素设定和 其他部分字体设置一致 {font-size:inherit}, inherit关键字基本可以应用所有的属性

二  数字 ≠ 视觉效果

　　+  在矩形的盒子  数字的中心并不是视觉上的中心. 视觉的中心一般要偏上一点.

　　+  相同 宽度的正方形看着比圆形要打

三 响应式布局

　　+ 滥用媒体查询(@media) 

　　　　1 媒体查询比较消耗性能

　　　　2 滥用媒体查询会增加我们的修改成本.

　　+ 响应式网页技巧

　　　　如: 使用百分比布局 或者与视口相关的单位 (vw,vh,vmin,vmax——必须给body 设定宽高 100%否则可能取不到)

　　　　　 max-width 有利于适应小屏幕

　　　　　 当使用{background-size:cover}的时候,应该考虑带宽问题, 尽量使用合适大小的图片,而不是使用css 吧图片放大缩小

　　　　　 使用弹性盒{display:flex}布局 、行内块 {display:inline-block}、 浮动{float:left} 能更好的处理适配中的文字问题

四 合理使用简写

五 预处理器(less ,sass,stylus,等)

　　　预处理器写代码是很爽, 但是也不是一点问题没有

　　　　1/ 预处理语言目前种类比较多,每加入一个协作者,都要进行学习和培训

　　　　2/ 抽象泄漏法则：“所有重大的抽象机制在某种程度上都存在泄漏的情况。”

六  calc(100%-40px)函数