• css tips 1(不太正规,随手记)


    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%;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上面

    请教个问题啊 div能不能重叠在table上面   div设置成position: absolute
    JS-豪情  15:38:24
    可以重叠在上面。但是除div设置定位,left,top值之外,上一级父容器还要设置成position:relative; 要不然没有重叠的效果。



  • 相关阅读:
    【2019.7.10】树上差分 杂[LCA 倍增][树上差分 点差分 边差分]
    【luogu4145】 上帝造题的七分钟2 / 花神游历各国 [线段树]
    【luogu1198】 [JSOI2008]最大数 [线段树]
    【luogu2783】 有机化学之神偶尔会做作弊 [tarjan 缩点][LCA]
    【luogu3388】 【模板】割点(割顶)[tarjan 割点]
    【luogu2272】 [ZJOI2007]最大半连通子图 [tarjan 缩点][拓扑排序]
    【luogu2194】HXY烧情侣 [tarjan 缩点]
    【luogu3627】 [APIO2009]抢掠计划 [tarjan 缩点][最短路]
    【luogu3398】 仓鼠找sugar [LCA 倍增]
    【luogu2746】 [USACO5.3]校园网Network of Schools [tarjan 缩点]
  • 原文地址:https://www.cnblogs.com/simoncook/p/2046555.html
Copyright © 2020-2023  润新知