随笔分类 -  CSS

CSS属性中Display与Visibility的不同
摘要:大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。 一句概括就是:visibility 虽然隐藏了但还会占据布局位置,而display隐藏并把height设置为0,即不占据布局位置。 阅读全文

posted @ 2010-10-21 11:16 年轻的蜗牛 阅读(256) 评论(0) 推荐(1)

纯css实现的质感圆角按钮
摘要:1、display:inline-block; 这个属性IE8和firefox3.0已经支持,IE6和IE7不支持,解决方法是*display:inline; zoom:1;原因如下: 使得display:inline;使得IE下元素变成内联元素,然后使用zoom:1;触发块元素的layout(我理解为可布局——对高度宽度敏感)。 2、class为“c”和“d”中的样式中用line-height,而没有使用高度原因在于使用height会使得IE下的元素获得layout,结果IE6与IE7下class为“c”的DIV宽度会延伸至100%;宽度满屏。 3、class为“b”的样式中position:relative;解决IE6下负的margin部分不可见的问题。_float:left;开始使用的是float:left,但是IE7下左-1px的大小没有起作用。无左浮动,IE6下由于高度原因,使IE6获得layout,结果宽度满屏延伸。于是就用了个针对IE6的hack。再想想办法,应该可以找到无hack的方法。 阅读全文

posted @ 2010-09-29 15:57 年轻的蜗牛 阅读(953) 评论(0) 推荐(0)

CSS自适应宽度圆角按钮
摘要:原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。/ 阅读全文

posted @ 2010-04-17 15:37 年轻的蜗牛 阅读(3947) 评论(1) 推荐(0)

Display:Block 详细用法
摘要: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。 阅读全文

posted @ 2010-04-15 10:00 年轻的蜗牛 阅读(35066) 评论(0) 推荐(5)

CSS Position属性详细应用
摘要:1. position:static 所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。 一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。 阅读全文

posted @ 2009-10-10 15:12 年轻的蜗牛 阅读(543) 评论(0) 推荐(0)