随笔分类 -  CSS相关

摘要:原因:相对定位(或绝对定位)里的绝对定位挨着浮动元素的时候,而且浮动元素宽度之和等于父元素,绝对定位的元素消失。解决:添加空标签。问题再现:一般情况下,添加空标签能解决这个问题了。可能因为写的是通用步骤条,当只有2步骤的时候,添加空标签也无效!!!IE6下问题还是存在。解决:在不影响视觉的情况下,IE6平均的减少宽度,这样浮动元素的宽度之和就小于父元素。看不出什么区别。改天附图,再详细讲解! 阅读全文
posted @ 2013-08-19 19:32 caijf 阅读(246) 评论(0) 推荐(0)
摘要:设计稿:外层使用了相对定位,最左侧大标题这块使用绝对定位,分类使用的是dl定义列表加浮动。.clearfix{ *zoom:1;}.clearfix:after{ clear:both; height:0; overflow:hidden; display:block; content:"";}.box{ position:relative; ....}.box .box_tit{ position:absolute; left:-30px; top:-1px; height:86px; width:31px; *zoom:1;}.box dl{ float:left; w 阅读全文
posted @ 2012-11-22 11:52 caijf 阅读(318) 评论(0) 推荐(0)
摘要:问题:其实也不算是bug,应该是写法上不够规范。一般我们的table写法:table{ table-layout:fixed; width:100%;}<table> <tbody> <tr> <th width="88">标题</th> <td>很长的内容。。。</td> </tr> </tbody></table>一般如上不会产生什么问题!下面我们看看,今天碰到的一个问题。如图,div{ display:inline-block;}table{ tab 阅读全文
posted @ 2012-11-21 13:42 caijf 阅读(209) 评论(0) 推荐(0)
摘要:原理CSS Sprites的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,通过背景图片外加背景图片定位来实现的。(注意是背景图片)CSS Sprites可以减少http的请求数(没整合的图片,每一张都需要请求一次。整合成一张只要请求一次),减少网站的加载时间。应用淘宝的 CSS SpritesHTML:<!--icon 调用这张图,作为一个基类,其他地方要用到这张图的都可以调用这个类; i-btn是需要设置的背景定位及宽高--><a href="javascript:void(0)" class="icon i-btn"& 阅读全文
posted @ 2012-11-08 16:21 caijf 阅读(187) 评论(0) 推荐(0)