css tips 1(不太正规，随手记)
2011-05-14 22:41 chen.simon 阅读(356) 评论(0) 编辑 收藏 举报1. debug 技巧
去除之前引入的css文件
去除不必要的dtd（诸如eclipse建的jsp文件自带的dtd声明，会引发一些问题）
netbeans 能自动提示 能告诉你非标准标签 能找到你缺的半边div 或者table之类的 （举个例子 就是你有4个<div> 但是你只有3个</div> 当你页面上的元素很多 几百行时 找起来就困难了 用netbeans就很容易发现 他会提示的）
2. 块级元素 线性元素
display none block inline
3. document.getElementById("testdiv").style.display
当你将这个display定义在css中 那么在ie下 用js执行上述语句是取不到值的
要写成这样 <div style="display:block"></div>
这样用上面的js就能读到display的值了
当然je上也有人说了一些在firefox下面的处理办法
4. 水平居中的问题
具体参考 编写高质量的代码 前端
5. 表格内文字在ie下自动换行的问题
table上加样式 layout:fix
td上加样式 word-break:....
具体的上网搜一下
6. overflow
7. className的操作
prototype库对此有很良好的封装 addClassName removeClassName
对于用于JS操作的className 建议加上J_前缀，以做区分
prototype支持 用$$(.....) ....是css支持的选择器
如：$$(#testEleID .testClass)
在页面上找出id为testEleID的元素中所包含的类名含有testClass的所有元素
并且prototype对于这些返回集合数组的操作，若找不到，不会返回undefined，而是返回“空数组” 正如java上所说，尽量返回空列表，不要返回null
8.超链接样式的定义顺序 love hate 即 link visited hover active
否则会出现点击后样式丢失的问题
看的书
<<
编写高质量代码
>>
http://book.douban.com/subject/4881987/
我的评论
《实战，经验不太丰富的前端开发快速提升》
http://book.douban.com/review/4898883/
//Add on 2012-03-18
9. 高度自适应(随浏览器大小自适应)
《CSS网站布局实录(第2版)》 P76
html 和body都要设置height为100%
然后div再设置height为100%
这样就能达到效果
html,body{
font-size:12px;
height:100%;
}
<body>
<div style="height:100%;min-height:400px;border:1px solid red;">
</div>
</body>
10. css设置最小高度 然后自适应
min-height:400px; height:auto!important; height:400px;
参考：http://www.daqianduan.com/css-height/
11. 左栏宽度固定 右栏宽度自适应在firefox下有问题
#right{height:100%;overflow:hidden;zoom:1;}
#left{height:100%;width:240px;float:left;}
要在右栏上加上overflow:hidden; 否则firefox下有问题
参见http://hikejun.com/blog/2011/10/26/%E8%BF%91%E6%9C%9F%E9%9D%A2%E8%AF%95%E6%84%9F%E5%8F%97/
12. div重叠在table上面
JS-豪情 15:38:24
可以重叠在上面。但是除div设置定位，left,top值之外，上一级父容器还要设置成position:relative; 要不然没有重叠的效果。
