简单而很有用的5个CSS属性

1. CSS Clip

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

实例　(demo)

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

.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。

.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; }

２．Min-height (demo)

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

.with_minheight { min-height： 550px; }

IE6 Min-height HACK

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

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