5个简单但是很有用的CSS属性

Power by Neter.aspx  Belong to xHtml+Css  PubDate is 2010-10-10

这篇文章讲5个有用的CSS属性 ,你应该很熟悉,但很可能会很少使用,我不是在谈论新的CSS3属性。我讲的是老的CSS2中的属性 ,例如:clip ,min-height ,white-space ,cursor ,和display被所有的浏览器所支持。所以,不要错过这篇文章, 因为你可能会惊讶他们是多么有用。

1. CSS Clip

clip 属性就像一个面具,允许你遮盖一个矩形框下面的内容。要剪辑一个元素,你必须指定position ,以absolute 。然后,指定它的top , right , bottom ,和left的值。

how css clip works

实例 (demo)

下面的示例演示如何使用掩码图像剪辑属性。 首先,指定《div》元素position: relative 。 下一步,指定《img》元素position: absolute和矩形容器;

image clip

.clip { position: relative; height: 130px; width: 200px; border: solid 1px #ccc; } .clip img { position: absolute; clip: rect(30px 165px 100px 30px); }

图像调整和剪辑Image Resize and Clip (demo)

在这个例子中,我将告诉你如何调整和剪辑图像。 我的原图像是矩形格式。我想把它按比例缩放50%并从中截取一个方框作为缩略图,所以,我用width和height属性来调整图像和遮盖层。 然后,我用left属性将图像向左离开15px。

thumb gallery

.gallery li { float: left; margin: 0 10px 0 0; position: relative; width: 70px; height: 70px; border: solid 1px #000; } .gallery img { width: 100px; height: 70px; position: absolute; clip: rect(0 85px 70px 15px); left: -15px; }

2.Min-height (demo)

min-height属性允许您指定一个元素的最小高度。当你想平衡布局的时候,这个是很有用的。我把它用在我的职位公告栏,确保内容板块总是高于侧栏的高度;

job board

.with_minheight { min-height: 550px; }

IE6 Min-height HACK

注意:IE6不支持Min-height,但是这里有一个HACK

.with_minheight { min-height:550px; height:auto !important; height:550px; }

3. White-space  (demo)

white-space属性指定一个元素里的空白如何处理的,例如,指定white-space: nowrap将防止文本转到下一行;

nowrap

em { white-space: nowrap; }

4. Cursor (demo)

如果你想要更改一个按钮的行为,那么光标的形状也要更改;例如,当一个按钮被禁用,光标应改为默认(箭头),以表明它是无法点击。因此, cursor属性是网络应用程序开发是非常有用的。

cursor

.disabled { cursor: default; } .busy { cursor: wait; } .clickable:hover { cursor: pointer; }

5. Display inline / block(demo)

display: inline or block

.block em { display: block; } .inline h4, .inline p { display: inline; }