网页设计中CSS和JS的一些心得整理

整理网页设计中常用到的HACK、颜色、样式技巧，也收集部分从网上收集来的认为不错的内容。

“淡淡的就很漂亮”

浅色的配色方案，感觉很好，看起来很舒服。

技巧与备忘

1. 关于BOX的实际宽度与内容宽度，要注意区分，在IE6、FF、OPERA8里BOX的实际宽度为margin border padding width，而内容宽度则是width，在有使用margin、border、padding的情况下，实际宽度≠内容宽度。

2. 对BOX设置float:left;会使其自适应高度，另外还有一个是overflow:auto;但在某一些情况下好像不行。而且如果你在此同时也设置了它的margin左边值，那么在IE里它将出现double-margin的BUG，但仅仅只是第一个BOX会出现，之后的一切正常。

3. 在某些情况下使用负值会让你有意想不到的结果。

4. 有些时候使用“%”也会有不错的效果。

5. 将图片的border属性直接写到CSS里面去，不要写在源码里。

6. 在FF里当出现滚动条时会将滚动条开始的位置当做边界点，而且IE6里则没有这样的解释，不管有没有滚动条，边界点始终是窗口边缘。

7. Window.Event事件中，FF无法直接调取，需在事件发生时通过参数传递，如：onClick="go(event);"IE下是直接用Window.Event来使用的，FF里则是用传递的这个参数来赋予变量来使用，为了兼容IE和FF我们的代码可以这样写：

   function go(evt){

     e=evt?evt:window.event;

     alert(e.clientX);

   }

   这样无论在IE还是FF里都能正确的弹出点击时鼠标的X值。

8. 链接样式的CSS写法顺序是：LVHA（LoVeHAte爱恨）。

9. 如果你想让一行没换行的文字垂直居中的话那么你可以用内补丁来使它看起来像是垂直居中的样子，但最好还是将其line-height设置为和它的父级元素的height一样。

10. * html与*html是IE特有的标签，FireFox暂不支持。而* html又是 IE7特有标签。 和*只有IE能识别，_只有IE6支持。

11. 随页面滚动的浮动层在网页加上标准声明后无法滚动了，原因是因为JS文件里的document.body不被标准支持，只要把这句代码替换成document.documentElement就可以了。

12. 如果有时候你在IE里发现文字消失了，滚动掉再滚回去又出现了，或者鼠标选中周围一起的内容就显示了，那么你可能陷入了IE的“文字消失之迷”，解决方法就是给消失的元素加上position:relative，但是在某些情况下也无法解决。