- 浏览器前缀:常见的有Firefox的-moz-,IE的-ms-,Opera的-o-,Safari和Chrome的-webkit-。每个浏览器可以实现实验性的(甚至是私有的、非标准的)特性。浏览器前缀极易滥用,未来需要打补丁,所以很多开发者会直接写上所有浏览器前缀,再把无前缀的代码放在最后,以希望满足所有情况,造成冗余。
- CSS编码技巧:尽量减少要改动的地方,如果某些值互相依赖,那就用代码体现出来。比如:
font-size:20px;line-height:30px;
行高是字号的1.5倍,就写成line-height:1.5;
- 使用em单位,百分比单位。但决定使用相对单位之前,要考量哪个元素(效果)是需要(再放大缩小等情况下)保持不变的,它们不能使用相对单位。如边框
border:1px;
- 线性渐变
linear-gradient()
,径向渐变radial-gradient
- 代码易维护和代码量少不等同,拆开的代码可能更好。针对简写。但简写是一种很好的防卫性编码方式,不易被覆盖。简写时消除歧义,使用/分隔。
- 颜色关键字:currentColor,是一个借鉴自SVG的变量,首次出现在CSS3颜色。表示当前颜色,如果没有指定颜色,就自动从文本颜色处获得颜色。本身currentColor就是很多边框的默认颜色值。
- 继承:inherit。从父辈继承。是一个值。
- 消除视觉错觉。比如:如果给容器四边指定相同的padding,实际效果看起来并不相等。因为字母的形状在两端比较整齐,而底部顶部则参差不齐。为了取得一致效果,往往减少底部顶部的padding。
- 响应式网页设计(Responsive Web Design,RWD)。添加媒体查询(Media Query)会增加成本,要尽量避免,作为最后的解决办法。减少媒体查询的方法:
使用百分比相对长度。使用窗口化单位(vw/vh/vmin/vmax)
使用max-width而不是width
background-size:cover