1.尽量用class来定义样式。尽量少使用  .div1 ul li{}这样的样式下去，因为如果li里面还有<div><ul><li>这些元素的话会造成干扰，应该给ul加个class如<ul class="ul1"></ul>这样来写。

2.margin:0px auto;　　用于兼容不同分辨率的内容居中设置。

3.分享一个非常好用的CSS图片合并网站，他能够将用户上传的图片一次合并成为一张大图片，同时还能够生成每张图片的背景位置，对于减少HTTP请求非常有用。

http://cn.spritegen.website-performance.org/

4.如果用了float:left;那么能用float:left就一直用float:left。否则左右不定，当HTML结构不合理时很麻烦。

5.绝对定位，要尽量找到离它最近的父元素作为定位基准，这样能更好地兼容分辨率等问题。而且浏览器移动也不会漂移。

6.今天解决了一个美化一个file表单元素的美化问题，真可谓是问题多多，特此做个记录。

　　按照公司的要求，上传表单要设计成只有一个按钮，不能够显示前面的文本框。

　　尝试过将<input type=file>隐藏，然后通过一个div的单击事件触发file的单击事件，这样虽然file表单元素是能够获取到路径，但是提交的时候，IE死活不让提交，但是将file元素显示之后，点击浏览按钮选择的路径却能够提交。因此得出一个未经严格验证的结论。IE下的file表单元素，一定要通过鼠标真正点击浏览按钮选择到的路径才会提交表单。因此此方法我废弃了。

　　既然你IE一定要鼠标真正点击才能够提交表单吗？OK，那我就把input file设置为透明的，盖在背景图上面，然后通过字体调整后面浏览按钮的大小，调到浏览按钮的大小刚刚好覆盖住背景图片，这样就完美了。代码不粘贴上来了，仅仅上传个DEMO程序，以后忘记了可以到这里下载。

　　　DEMO地址

7、z-index说明。

在IE中，对于定位元素，不是单纯的比z-index谁大谁小，还要比其父元素的大小。此图从园子里一个牛人处拷来。原本地址是：http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html，可以看到在IE中，是先比较了父元素的z-index，然后再比较同一父元素下的子元素。图片已经说明得很清楚。只要自己的父元素z-index不够大， 无论自己的z-index再大，也不会盖过其他父元素比它高的元素的子元素。

8、在布局时，不要定好了宽度，再来处理什么padding,border,margin之类的。因为定好了宽度，如果按照这个宽度再来添加padding,border,margin，实际上这个盒子占用的距离为padding + border + margin + content。

9、Cursot自定义光标注意的问题

css:{cursor:url('绝对路径的图片(格式：cur,ico)'),-moz-zoom-out;}//FF下面
css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以
前面url是自定义鼠标格式，图像的绝对路径地址，后面的参数是css标准的cursor样式，（IE下面可以不需要）
图标的格式根据不同的浏览器来分：IE支持cur,ani,ico这三种格式，FF支持bmp,gif,jpg,cur,ico这几种格式，不支持ani格式，也不支持gif动画格式，因此来说一般将图片存为cur或ico格式比较好，如果是ani格式的话，那么可以在FF下面用jpg,gif,bmp来代替(cursor:url(.....ani),url(.....gif),auto)
还有几个需要注意的地方：1.图片地址为绝对路径，2.图片大小最好是32*32的大小，反正在各个浏览器下面解析的大小不一样
 
10、今天碰到一个奇怪的问题，google，IE浏览器下这段代码：

                    <td width="120px">

                        <a>xxx</a>

                    </td>

                    <td>

　　　　　　　　　　　　　　<a>xxx</a>

                    </td>

                    <td width="50px">

　　　　　　　　　　　　　　<a>xxx</a>
　　　　　　　　　　　　</td>

　　本来是3个td，某一天，突然中间那个加了个很长的a内容，结果在google里就把整个table都撑大了。

　　后来在中间的td加了个　　style="word-break:break-all;"　　就搞定了。

11、IE7下滤镜的问题：

　　先来看下面这一段代码在IE7下面与谷歌浏览器下的区别：

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

    <div style="margin-top:300px; margin-left:300px;  position:fixed; width:200px; height:200px;">

        <div style=" position:relative; width:160px; height:160px; opacity: 0.9; filter:alpha(opacity=90);">

            <div style=" position:absolute; left:-50px; top:-50px; width:100px; height:100px;"></div>

        </div>

    </div>

</body>

</html>

　　先来看谷歌的表现：

　　

　　IE7的表现：

　　

　　这里主要的问题就是，当一个DIV设置了 filter:alpha(opacity=90);属性之后，在IE7下，所有超越该DIV边界的东西都会自动隐藏。暂时我还没有找到办法解决。

　　但是有绕道方案：

　　1、将要跨界显示的内容，移到设置了filter的DIV之外，再用相对偏移量移到适当位置。

　　2、加这一句代码    *filter:;　　在IE7下不启用透明效果。对其他浏览器没影响。

12、dispaly:none与visibility: hidden的区别

　　dispaly:none；　CSS1隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。

　　visibility: hidden；设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。如果希望对象为可视，其父对象也必须是可视。

CSS开发经验的更多相关文章

  1. css开发经验&错误习惯

    CSS开发经验 1.尽量用class来定义样式.尽量少使用  .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会 ...

  2. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

  3. 20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章 分别是CSS架构目标和说说CSS学习中的瓶颈

    多讲一个,CSS全称是什么?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术 ...

  4. Vue.JS 对比其他框架

    Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部 ...

  5. 关于QT的系统总结

    编译环境与开发流程 开发QT有两种IDE可以使用,一种是使用 VS + Qt 的插件,另一种就是使用QtCreator工具.前一种是微软的工具,用的都比较多容易上手,缺点是信号槽的支持不太好,需要手写 ...

  6. 关于QT的系统总结（非常全面，非常好）

    源地址:http://www.cnblogs.com/wangqiguo/p/4625611.html 阅读目录 编译环境与开发流程 QT项目的构成及原理 QT中的布局 QT中的通用控件 QVaria ...

  7. [转] 关于QT的系统总结

    出处:http://www.cnblogs.com/wangqiguo/p/4625611.html 阅读目录 编译环境与开发流程 QT项目的构成及原理 QT中的布局 QT中的通用控件 QVarian ...

  8. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. css考核点整理（十一）-响应式开发经验，响应式页面的三种核心技术是什么

    响应式开发经验,响应式页面的三种核心技术是什么

随机推荐

  1. VBS 操作注册表 十六进制

    使用VBS操作注册表,通常使用RegRead/RegWrite/RegDelete方法,如: RegRead: 'read.vbs(将以下代码存为read.vbs文件) Dim OperationRe ...

  2. mybatis和hibernate对比

    Hibernate是一个数据库表和java对象之间完全映射的框架,java开发人员直接对java对象操作,而不对数据库表进行操作: Mybatis是对SQL语句和java对象进行映射,仍需要开发人员编 ...

  3. c++ 04

    一.this指针 1. 2.应用场景 1) 2)将this指针作为函数的参数.一个对象可以通知另一个对象有关自身的地址.    教师 提问|^     V|答案    学生 交叉类问题: class ...

  4. <转载>Wait and Waitpid

    转载http://www.cnblogs.com/lihaosky/articles/1673341.html 一.Wait #include <sys/types.h> /* 提供类型p ...

  5. 【强烈推荐】《剑指Offer：名企面试官精讲典型编程题》一书中IT名企经典面试题

    各位程序猿:         <剑指Offer>一书源自该书作者何海涛坚持更新与编写的博客(http://zhedahht.blog.163.com/),该博客收集整理了大量如微软.Goo ...

  6. SQL Server,Oracle,DB2索引建立语句的对比

    原文引至:http://jvortex.blog.163.com/blog/static/16961890020122141010878/ 我们知道,索引是用于加速数据库查询的数据库对象.原理就是减少 ...

  7. 黑马程序猿 IO流 ByteArrayInputStream与ByteArrayOutputStream

    ---------------------- ASP.Net+Unity开发..Net培训.期待与您交流! ---------------------- package cn.itcast.IO; i ...

  8. Java动态 遍历List 时删除List特征元素 异常问题 及解决方案总结

    首先.这是一个极其简单的问题,大牛可忽略.新手可能会遇到,Java中遍历某个List 时删除该List元素 会抛出异常. 这一个简单的问题再高手严重不值一提,但新手可能会比較困惑,用哪种方式能够安全有 ...

  9. 文件atime未变问题的研究

    1. atime, ctime 以及mtime 这三个名词属于文件/文件夹的属性,存在于inode数据结构之中. 通过系统调用stat可以获取stat结构,其中包括:atime(accesstime) ...

  10. Hadoop集群启动之后,datanode节点未正常启动的问题

    Hadoop集群启动之后,用JPS命令查看进程发现datanode节点上,只有TaskTracker进程.如下图所示 master的进程: 两个slave的节点进程 发现salve节点上竟然没有dat ...