用CSS制作日历弹出框的心得

* 整体思路

    1.用table做，本来认为一定要给td设定宽高，后来发现其实不用，经测验，td为inline-block，可以设置宽高，默认也会靠正常流的内容自动撑开。

    2.td内插入一个a标签，将其display：block，设置与背景图大小相同的宽高。

    3.a：hover时，背景由黑色变为小图片。

    4.由于要用a的hover来控制右侧信息图的展现，所以，信息图也需要是a的子标签。故在a中插入span，（为了简便，这里只是将信息图截图做了span的背景）并display为block，再设置margin-left，为了不挡着a的小图背景。

      结果超出了正常的初学者思维：span虽然属于a的子标签，但其展现出来其实是在a的外面，看起来完全不包含在a中。这应该是html的特点之一：子超出了父标签的盒模型范围，但是依旧会显示出来，除非使用overflow：hidden。

    4.细节框span先设置成display：none，然后在a：hover的时候，将其display：block，并且设置宽高和背景图。这时，信息图会被其他的td挡住。

    5.之所以会被挡住，是因为我们为了批量处理，用的是【.lucky a】与【.lucky a span】这俩个选择器，后面的a元素肯定会遮盖前面的a元素的重叠内容，而信息图span是属于a的内容。而且，在IE6中，当span出现的时候，还会撑开a的盒模型（即便是浮动子元素也会撑开，这是常见bug）。经测试发现，如果浮动了td中a的span，td的高度会被撑开。。。进而，再将td也浮动，高度则可以不被撑开，可以此时的span和td都属于浮动层的元素，那么后面的td还是会遮盖住span。所以只能选择将span用absolute定位，让他彻底脱离正常的世界。

    6.不设置relative基元素，span将凌驾与所有body中的元素，此时，一定要记得，margin还是有用的，所以可以通过margin的正负值来调整信息图的位置。我用的margin-top：-35px来让信息图向上走一点，让小图位于信息图的左侧中线位置。

    7.研究过程中，曾经试过让a标签整体的absolute和relative，得出了另一种方案，就是让a：hover的时候，a自己直接absolute，然后会出现小图的位置会偏出td上面一些，后来让td也浮动，就成功了。只是无法再用margin-top：-35px来调整span的位置，因为a也会跟着动。目前还没在ie6中测试，明天测测看。

    8.其实所有方法，都是分为俩个阶段性目的：（1）让span脱离a （2）调整span的位置。

 

* 总结：首先，这本是用JS来实现的东西，但是我们用CSS做，很勉强，里面上述的一些现象，不能深究。

    1.IE6中，只有子元素绝对定位才会不撑开父元素。

    2.同一排版流中，后面的会盖住前面的交集部分。

    3.绝对定位后，不设置基点，则以body为基点，凌驾于所有流，除非出现另一个绝对定位的，就用z轴控制。设置了基点后，绝对定位的元素（我称其在绝对层）在显示优先级方面仅仅低于基点元素，而会高于所有基点的子元素。

    4.table的td，不浮动的时候，a用relative也可以实现效果，但是在ie6中肯定不行，因为relative依旧会把ie6的块给撑开。

    5.absolute后，margin还是管用的。

    6.正常层，浮动层，绝对层，是在确定各个元素之间的数据结构，层级关系，并不影响他们的父子相对关系，也就是说，你再怎么浮动，也得看你的父元素的大小，当然，被迫换行的时候，总是会忽略父元素的高度，但是仍然会遵守父元素的宽度。absolute之后，不看父元素了，但是会找基点做相对参照，所以无论怎么样，绝对中有相对，相对中有绝对，完全看排版引擎是如果来输出他们，不能认为，脱离了，就完全自由了。

 

* 有些问题目前我也说不清楚为什么，总之是在不断的找感觉。在ie6的bug和体会各种流方面，与同学讨论了很多，很有收获。但是这种学习方式仅适于前期——尽量深入的理解基础原理。日后，要加强对于各种常见问题固定解决办法的熟练，毕竟，熟练的调整好bug，比搞清所有bug的原因要有意义的多。