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

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

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

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

评论总数：0 条 [ 查看全部 ] 网友评论