css心得之善用 position:relative

日期 : 2011年6月12日 1:35 am 标签 : - 代码浅谈 - css 评论 : 20 feet 日历 : 12 Jun 2011

发现最近可以吐槽的东西越来越少 =，= 大概是工作有些忙了~ blog 都杂草丛生了 = =

技术文，看不懂可以提问哇，实在看不懂就挑好玩的看^__^ 很湿~
此文章堆在后台好久了，一直都没找到配图，思路也没理清楚，于是都快臭了~

好吧进入正文~~
=========================华丽的吐槽线======================
可能是个人习惯吧，我个人在写css 样式的时候 position:relative 都很少用。不到逼不得已不用，因为这东西在面对IE大叔的时候总是会各种被推到，比如多个positon 嵌套的的时候会产生类似 z-index 优先级的失控，不知道其他coder们碰到过这个问题没？反正我是碰到不下1次了。

举个栗子如下：html 代码 节略写法，你懂的 阅读全部>>

IE8 不定尺寸图片垂直居中引起的 bug

日期 : 2010年9月25日 21:49 pm 标签 : - 慢性创可贴 - css - ie8 评论 : 0 ~o~ 日历 : 25 Sep 2010

偏激害死人 – 再谈 OOCSS – 对象式书写规则

日期 : 2010年9月22日 13:25 pm 标签 : - 代码浅谈 - css 评论 : 12 feet 日历 : 22 Sep 2010

<img class="alignnone size-full wp-image-935" title="blog20101922" src="http://www.qilei.org/wp-content/uploads/2010/09/blog20101922.jpg" alt="" width="600" height="200" /> 
配图:最近 太宠 小3(mac book pro 374)了,大老婆抖去了, 闹脾气起不来了.
看这篇文章前可以先 去看下下面这篇文章. <a href="http://www.zhangxinxu.com/wordpress/?p=1098">精简高效的CSS命名准则/方法</a> 
当一个css 代码年龄超过 2年的淫都会想着怎样去偷懒,去节省那些重复的样式代码. 
于是就出现了很多流派. (以下名字都湿我YY, 哥只是 非专业的) 
比如 
直肠流: 写css 属性不换行. e.g.<code>.class{color:red; }</code> 
短线流: 写css 喜欢用短词用中横线链接 e.g. <code>.home-notice-tit{...}</code> 
and so on.. 
当然也有上面文章里的 大牛 使用分离 流 e.g. <code>.pl4{padding-left:4px }</code> 
因为这样的分离流, 咱们 <a href="http://h-yue.com">星罗 </a>发飙了, 发扬愤青应有的愤怒. 
的确, .pl4 .pl10 这样的做法 飞鱼我也是很鄙视的, 丫 跟内联样式 有啥区别, 
如评论所说的, 这样写无非是再写天书, 缺点毛多. 
就像星罗 说的一样,因为尝试过了,之后发现大的问题, 然后放弃了.
<h3>过分进行属性分离的后果</h3>
<ul>
<li>1.可读性: 1星, 还需要别人是很努力的记下你的缩写表.</li>
<li>2.可维护性: 1星, 曾经有个需求让哥去掉, 某tit(上左右1px border),的boder,然后给tit加 一个背景, 代码类似: bt1 bl1 br1 .丫的, 搜了一下有他娘的40哥文件上百处. </li>
<li>3.CSS Sprites:1星, 用CSS Sprites 的时候,会很囧rz ,用了就知道</li>
<li>4.不可压缩及分布式调用: 随着需求越来越复杂, 公用样式包会越来越大, 又不能切分, 对于多样化的页面将是噩梦,会遇到 只有丁点样式,而不得不调用庞大样式得尴尬情况</li>
<li>5. 还有好多…</li>
</ul>
以上只是过分 属性分离的后果. 
但是上文中张鑫旭的文章 中也有好的部分, 比如他的 oocss 对象式css 书写规则, 
这种对象式的书写方法也是我慢慢积累出来的一种方法. 
oocss 的 书写带来的效率及性能可以看这里: <a href="http://www.zhangxinxu.com/wordpress/?p=1045">翻译:同CSS技术及其CSS性能</a> 
也可以查看我之前写的 <a href="http://www.qilei.org/201008/addon-class-do-not-run-on-ie-6/">又见IE6吐槽~ 并行结构式class引起的bug</a>
好了回归主题, 说说我对 OOCSS 对象式css 书写的理解,还有心得. 
 <a href="http://qilei.org/201009/talking-about-the-oocss-for-web-site/#more-934" class="more-link">阅读全部>></a>

又见IE6吐槽~ 并行结构式class引起的bug

日期 : 2010年8月16日 20:29 pm 标签 : - 代码浅谈 - bug - css - ie6 评论 : 16 feet 日历 : 16 Aug 2010

伸缩自如 – 绝对定位的自适应能力

日期 : 2010年5月1日 22:30 pm 标签 : - 代码浅谈 - css 评论 : 7 feet 日历 : 1 May 2010