《css揭秘》读后感及摘要

《css揭秘》摘要

前几天买了本css的书《css揭秘》 实事求是的说:   这本书讲的还不错，css方面的书质量高的本来就不多。不过总感觉还是差了那么一点。书里讲的更注重css技巧，而不是css在网站架构方面的实际经验。读完有点小遗憾：

• css方面的书写出彩确实不容易，大部分最后都会沦为css小技巧。其实我觉得第一章引言部分更适合深入拓展开，可惜没有。。。

下面摘录一些我读完觉得值得记录的地方。

1. 关于响应式网页设计

人们大多只是在不停的念叨页面的“响应式”是多么重要，而极少有人去探讨怎么还能做好响应式设计

顺便吐槽了一下媒体查询的（media query）的滥用。

每个媒体查询都会增加成本。你添加的媒体查询越多，你的css代码就越来越经不起折腾。 并不是说媒体查询是一种不良实践。你只应该把他作为最后的手段。比如你想把网站做的弹性灵活，但是其他尝试都失败了；或者你想在较大或者较小的视图下完全改变网站的设计布局。

2. 相信自己的眼睛。

人得眼睛并不是一台完美的输入设备，有时候精准的尺度看起来并不精准，而我们的设计需要顺应这种偏差。ex：我们的眼睛看到一个完美垂直居中的物体时，会感觉他并不居中。

这些视觉上的错觉在任何形式的视觉设计中都普遍存在。需要我们有针对性的进行调整。3.尽量减少代码重复，当某些值互相依赖时，应该把他们的相互关系用代码表达出来

ex:行高和字号，和color相关的的currentColor值。以及inherint。

4.不要忘了为替换元素设置一个max-width：100%；替换元素有：img，object，video，iframe等。。

5.一个有用的布局技巧--紧贴底部的页脚

flex布局实现一个紧贴底部的页脚

body{     display:flex;     flex-flow:column;     min-height:100vh; }  main{flex:1}body{
    display:flex;
    flex-flow:column;
    min-height:100vh;
}

main{flex:1}

官网的例子demo点击这里