css世界读书笔记

  一直以来都觉得前端CSS可能是最难学的，emm..最难学好学精的。直到现在写CSS，有时候遇到一些小问题都不知道怎么回事，甚至有时候还会写一些无用的的属性，是在我用了语法检测才发现以前写的部分CSS其实是不正确的。有时候不明白一些属性的原理，你加很多CSS是完全不会生效的。

  遇到CSS问题的时候特别是比较棘手的问题，张鑫旭的博客中几乎都能找到。所以对于张鑫旭在CSS方面的造诣还是比较佩服的，希望能从《CSS世界》这本书中学习到不一样的东西。但是首先先就要吐槽一下，蹩脚的比喻和美式幽默的腔调确实不适合我，如果少一点废话，这本书至少可以省去1/3的篇幅。

  内容上设计上这本书着重于CSS2，比较贴近实际，CSS3新增了很多内容，也纠正了一些之前设计上的问题。如box-sizing等，但更多的则是CSS动画，使用CSS3动画相较于之前的JS动画，可以大大减少页面的重排和重绘，从而提高网页性能。但在实际开发中更注重于实现而不是动画，个人感觉动画只是点缀，提升用户体验。在实现层CSS2更为重要，学习CSS背后的技术内幕。

  相较于其他编程语言，CSS毫无逻辑可言，所有的东西都像堆叠起来的一样，所以叫层叠样式表?对于每一条CSS属性都有其作用，如一个span是属于内联元素(inline)，是不能设置width和height的，如果使用的display属性设为block、inline-block或其它块元素，就可以为其设置宽高了。例如书中在块级元素提到的清除浮动方法：

.clear:after {
    content: '';
    display: block;
    clear: both;
}

在很长的一段时间里我都是使用clear:both，而且并不是使用伪类的方式。除了block还可以使用table、list-item.

  还有height的问题，经常会遇到设置height: 100%，实际高度永远是0，如果不明白计算方式那么永远都是0。就之前做项目的时候实现一个footer沉底，内容不足铺满一页沉底，超出页面就往下堆叠。其实思路很简单，就是footer绝对定位，bottom为0。但是代码这么写了却永远不生效。因为高度计算不正确，绝对定位就不能成功定位。vue项目中：

#app {
    height: 100%;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}

在vue项目中一般footer的父元素大都不是app，可能还会有，所以这样做不ok，那么给app和footer之间的元素都加上height: 100%就可以了吗，也不行，其实实际动手试一下，调试选中app如果页面内容不足铺满屏幕，那么app的高度也不是窗口的高度，因为还少了一部分：

html, body {
    height: 100%;
}

因为app的父元素html和body并没有达到整个窗口的高度，只是适应了内容的大小。所以要确保高度能够正确计算，另外，父元素auto，子元素100%，是无法计算高度的，因为100% * auto。

  个人觉得书中3-7章比较有用，涉及到的东西也比较多，关于元素、盒子、流等内容。读完这本书，说实话虽然一直在吐槽书的啰嗦和一些比喻，但确实收获很大。从第3章开始读起来是比较费劲的，很多东西都得边读边思考，还不能跳过一些比喻，跳过感觉往后读就有些吃力。特别是盒尺寸一章，读的令人头大。最后几张读起来就轻松许多，很快就过一遍了。吐槽归吐槽，但是如果有人问我学习CSS的书我还是会推荐这本书，前提是有一定的CSS开发经验，至少得踩过一些坑，读这本书才有用，新手还是上W3C看看基础属性吧。

  这本书中也给出了很多实际开发中一些问题的解决方案，都是比较好的解决方案，也是大家都比较推崇的。读完之后收获很大，但在盒尺寸和流这一块还需要实际用的时候，再来翻阅一遍。