五个简单的但是非常有用的css特性

 

翻译自：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示例：

先将div（image的容器）的position属性定为relaticve。

然后定义img标签的position为absolute。

然后定义clip rectangle的属性。

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

img resize 和 clip示例：

在这个示例中，我将展示给大家如何缩放和裁剪图片，初始图片已经是一张矩形的图片。我样把修改为原来大小的50%的正方形图片。于是我用width和height属性来将它缩小，然后用clip特性来裁剪一下就好了。最后将left属性设置为-15px，让图片间有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示例

min-height可以用来定义元素的最小高度，在布局的时候这个特性非常实用。我曾用它来确保我job board板块永远高于sidebar板块

 

.with_minheight {
  min-height: 550px;
}

针对IE6的min-height hack

 备注：min-height属性不支持IE6 一下是针对IE6的hack

 

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

3 white-space示例

 white-space属性定义如何处理元素中的空白

例如，指定white-space：nowrap将阻止文本换行

em {
  white-space: nowrap;
}

4.cursor示例

如果你要改变一个按钮（button）的行为，也应当改变光标的样子。比如说，一个按钮被禁用的话，也把光标改为默认值（箭头）。在网络程序开发中将非常有用。

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5.display inline /block示例

display：inline 使元素顺序行内依次排列显示，到行末尾才会换行，而display：block则是使得元素独占一行显示。<div> <h1> <p>等默认是独占一行（即其display：block），<em> <span> <strong>等是内依次排列显示。你可以重写display属性来控制元素显示为inline或者block。

.block em {
  display: block;
}

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