学习《精通CSS高级Web标准解决方案》(第二版)

今天把《精通CSS高级Web标准解决方案》(第二版)翻到了最后。 这本书是领导Jacky推荐的，Jacky说这本书关于CSS的一些基本知识讲述的很全面，很具体。 于是趁这个年假，想着在家闲着无事，当时顺便把书带回家了。 由于之前有过一些前端知识基础，因此也没花多少时间，就看完了。

书主要讲了三个大方面的知识：

  • CSS一些属性的作用，兼容性

  • 布局技巧

  • bug解决思路分享

如Jacky所说，书中对CSS的一些属性解释的很透彻。 之前总是遇到一些效果不知道怎么实现，比如，导航栏的按钮实现，需要均分屏幕宽度。通过一些CSS样式的配合使用即可达到目的。 再比如overflow设置为hidden时，即使子元素使用了浮动，元素的高度也是实际高度。

一些特殊属性，通过加-moz-或者-webkit-的前缀，可以兼容不同浏览器中的差异。

position的正确使用能处理绝大部分的复杂布局问题。 以下记录position的几个值的作用：

值 作用
relative 元素具有位置布局能力
absolute 以position为relative的父元素左上角为坐标进行布局
fixed 以浏览器窗口的左上角为坐标进行布局

通过大量的测试结果显示，fixed属性在iOS上的表现不是很好。

在盒模型布局中，div的width是指内容的宽度，不包含补白、边框和间距，也就是说，如果width为70，padding是5，border是1，margin是10，那div的实际宽度应该是82。 也就是说，div的宽度，应该是border+padding+width。

除此之外，书还分享了一些bug的解决方法，结合个人的实际经验，大致可以总结为这样的一个流程：

  • 1.review代码，排除代码书写错误和语法错误；

  • 2.调试工具的合理使用，chrome，safari，firefox都有很完善的调试功能；

  • 3.搜索引擎的使用，以上两种方式都解决不了，那就问谷歌吧。

Table of Contents