CSS揭秘读书笔记-第一章 引言


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

使用百分比相对长度。使用窗口化单位(vw/vh/vmin/vmax)
使用max-width而不是width
background-size:cover

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值