神马文学网5个简单但是很有用的CSS属性
来源：百度文库 编辑：神马文学网 时间：2024/04/30 22:19:48
5个简单但是很有用的CSS属性
2009-12-07 14:15:40 来源:www.haifun.cn 【大 中 小】 评论：0 条 我要投稿 我要收藏买空间、服务器就上主机网（CNIDC.COM） 虚拟主机评测+IDC导航=主机之家。这篇文章讲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; }
２．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; }