原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
五个有用小技巧
HYPERLINK /island205/archive/2009/12/18/1627005.html 五个简单的但是非常有用的css特性
?
翻译自： HYPERLINK /tutorials/5-simple-but-useful-css-properties/ web designer wall
?
这里说的有用的5个css特性是大家所熟悉的。没有涉及到css3.0的内容，都是css2.0标准里面的。
clip
min-height
white-space
cursor
display
差不多所有浏览器都支持这些特性，所以千万不要错过这篇文章，你一定会惊奇于他们是如此的有用。
1.css clip
clip特性裁减一个绝对定位的元素。将元素的position定为absolute，然后开始通过定义矩形的top left right bottom属性，裁减该绝对定位的元素。
?
image clip HYPERLINK /wp-content/uploads/2009/11/css-clip.html 示例：
先将div（image的容器）的position属性定为relaticve。
然后定义img标签的position为absolute。
然后定义clip rectangle的属性。
HYPERLINK /island205/archive/2009/12/18/1627005.html \l viewSource#viewSource \o view source view source
HYPERLINK /island205/archive/2009/12/18/1627005.html \l printSource#printSource \o print print HYPERLINK /island205/archive/2009/12/18/1627005.html \l about#about \o ? ?
01
.clip {
02
??position: relative;
03
??height: 130px;
04
??width: 200px;
05
??border: solid 1px #ccc;
06
}
07
.clip img {
08
??position: absolute;
09
??clip: rect(30px 165px 100px 30px);
10
}
img resize 和 clip HYPERLINK /wp-content/uploads/2009/11/css-clip.html 示例：
在这个示例中，我将展示给大家如何缩放和裁剪图片，初始图片已经是一张矩形的图片。我样把修改为原来大小的50%的正方形图片。于是我用width和height属性来将它缩小，然后用clip特性来裁剪一下就好了。最后将left属性设置为-15px，让图片间有15px的距离。
HYPERLINK /island205/archive/2009/12/18/1627005.html \l viewSource#viewSource \o view source view source
HYPERLINK /island205/archive/2009/12/18/1627005.html \l printSource#printSource \o print print HYPERLINK /island205/archive/2009/12/18/1627005.html \l about#about \o ? ?
01
.gallery li {
02
??float: left;
03
??margin: 0 10px 0 0;
04
??position: relative;
05
??width: 70px;
06
??height: 70px;
07
??border: solid 1px #000;
08
}
09
.gallery img {
10
??width: 100px;
11
??height: 70px;
12
??position: absolute;
13
??clip: rect(0 85px 70px 15px);
14
??left: -15px;
15
}
?
2.min-height HYPERLINK /wp-content/uploads/2009/11/min-height.html 示例
min-height可以用来定义元素的最小高度，在布局的时候这个特性非常实用。我曾用它来确保我job board板块永远高于sidebar板块
?
HYPERLINK /island20
文档评论（0）