CSS开发经验
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程序，以后忘记了可以到这里下载。
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('绝对路径'),auto;}//IE,FF,chrome浏览器都可以
<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开发经验的更多相关文章
- css开发经验&错误习惯
CSS开发经验 1.尽量用class来定义样式.尽量少使用 .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- 20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章 分别是CSS架构目标和说说CSS学习中的瓶颈
多讲一个,CSS全称是什么?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术 ...
- Vue.JS 对比其他框架
Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部 ...
- 关于QT的系统总结
编译环境与开发流程 开发QT有两种IDE可以使用,一种是使用 VS + Qt 的插件,另一种就是使用QtCreator工具.前一种是微软的工具,用的都比较多容易上手,缺点是信号槽的支持不太好,需要手写 ...
- 关于QT的系统总结（非常全面，非常好）
源地址:http://www.cnblogs.com/wangqiguo/p/4625611.html 阅读目录 编译环境与开发流程 QT项目的构成及原理 QT中的布局 QT中的通用控件 QVaria ...
- [转] 关于QT的系统总结
出处:http://www.cnblogs.com/wangqiguo/p/4625611.html 阅读目录 编译环境与开发流程 QT项目的构成及原理 QT中的布局 QT中的通用控件 QVarian ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css考核点整理（十一）-响应式开发经验，响应式页面的三种核心技术是什么
响应式开发经验,响应式页面的三种核心技术是什么
随机推荐
- HEX转BIN源码分析（51系列）
以前写的一个Atmel的S5X的下载程序,其中有支持HEX格式的文件,所以将这个程序贴出来,程序的意思是将输入的HEX文件转换为BIN格式的文件,并存储到文件中,注意不支持64K的扩展模式. int ...
- QDataStream类参考（串行化数据，可设置低位高位，以及版本号），还有一个例子
QDataStream类提供了二进制数据到QIODevice的串行化. #include 所 有成员函数的列表. 公有成员 QDataStream () QDataStream ( QIODevice ...
- 《Programming WPF》翻译 第5章 6.触发器
原文:<Programming WPF>翻译 第5章 6.触发器 目前为止,我们已经看到样式,作为一个Setter元素的集合.当应用一个样式时,在Setter元素中描述的设置不会无条件地应 ...
- 导入Excel表格到SharePoint站点
在Excel中创建表 选中所有要导入的行,点击菜单"插入"->"表格" 如果数据内容包含表头,选择"我的表格包含表头". 选择菜单 ...
- [置顶] Android四大组件之BroadcastReceiver
Android四大组件之BroadcastReceiver Broadcast Receiver 广播接收器,是一种负责接收广播消息并对消息做出响应的组件,和Service一样并不提供与用户交互的UI ...
- jquery-ui datepicker使用
这是一款老外设计的日期控件 很多显示方式都是国外的 需要自己调整一下 closeText: "Done", prevText: "上一月", nextText: ...
- wikioi1191 数轴染色
题目描述 Description 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着 我们进行M次操作,第i次操作将[Li,Ri]这些点染成白色.请输出每个操作执行后 剩余黑色点的个 ...
- c++ 06
一.下标操作符 A a (...); cout << a[3] << endl; cout << a.operator[] (3) << endl; c ...
- RFC3261--sip
本文转载自 http://www.ietf.org/rfc/rfc3261.txt 中文翻译可参考 http://wenku.baidu.com/view/3e59517b1711cc7931b716 ...
- 如何判断是REQUEST请求是来自移动终端还是来自PC端
public bool IsMoblie() { string agent = (Request.UserAgent + "").ToLower ...