http://kkkchen.github.io/

今天完成的事情：

1 完成了视差效果的新主页；

2 在看精通css；

3 修改了一下task5-2；

明天计划的事情：

1 开始task6

遇到的问题：

1 什么是栅格？

答：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，通常分成12等分或者24等分；

2 什么是补差等高法（正内负外补丁）？

答：先将padding-bottom：10000px，再margin-bottom：-10000px，再将他们的父元素设为overflow：hidden即可；

3 偶尔看到css属性里有写成这样的属性： *display，什么作用？

答：这是为了兼容ie6和ie7，*代表是专给ie6/7写的；

4 当子元素的line-height大于父元素的height时？

答：会超出父元素，并将同行字体带走；

收获：

1 HTML 标签的嵌套规则:

a. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素；

b. 块级元素不能放在<p>里面：

c. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1、h2、h3、h4、h5、h6、p、dt

d. 块级元素与块级元素并列、内嵌元素与内嵌元素并列;

2 注意，line-height使用相对单位，百分比时，其子元素继承的是父元素计算值；

3 要实现高度不固定的文字垂直居中使用padding就好了;

4 css sprite

一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。

优缺点：

优点：利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；

缺点：

1 通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；

2 要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

3 维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。