天高任鸟飞

       

常被遗忘但非常有用的10个CSS属性

作者：     目录： PHP+MySQL     发表： 2009年12月09日

我们习惯使用自己熟悉的CSS属性来定义页面的样式，虽然下面这些CSS属性虽然不是很常用，但掌握这些方法也许能让你如虎添翼。

1. clip 【预览】

类似于遮罩层的感念，只显示出指定位置及大小的矩形框中的内容,通过指定 top right bottom left 四个参数来决定矩形框的位置及大小。

使用Clip属性时须指定Postion属性值为absolute。

clip

CSS代码：

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}
2. min-height ﹑min-width ﹑max-height ﹑max-width 【预览】

这些属性指定元素的最小高度（min-height）﹑最小宽度（min-width）﹑最大高度（max-height）﹑最大宽度（max-width），常用来平衡页面布局。

min-max

CSS代码

.box-min-height {
  min-height: 550px;
}

IE6不支持这些属性，可以使用下面CSS代码来代替

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

min-height min-width max-height max-width 这些属性指定元素长宽方向的极值。

height width指定元素的长 宽，其值为固定值，所包含的内容只能显示在指定的范围内。

3. White-space 【预览】

遇到空格时的换行方式。

white-space

CSS代码

em {
  white-space: nowrap;
}

4. cursor【预览】

鼠标类型

[ crosshair | text | wait | default | help | e-resize | ne-resize | n-resize | nw-resize | w-resize | sw-resize | s-resize | se-resize | auto ]

CSS 代码

cursor

CSS代码

.default{
  cursor: default;
}

.wait{
  cursor: wait;
}

.pointer:hover {
  cursor: pointer;
}

5. display inline block【预览】

块（block）元素，例如h div p，在显示的时候会单独占有一个新行，而内嵌（inline）元素，例如span em strong ，则会显示在相同行内。

display

CSS 代码

.block em {
  display: block;
}

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

6. position:fixed 【预览】

元素的位置固定不随页面滚动

position

CSS 代码

.position{
  position: fixed;
  top: 200px;
  right: 0px;
  height: 200px;
  width: 100;
}

7. background-imgage (css sprites) 【预览】

css-sprites

CSS 代码

.css-sprites-50 {
  background-image: url(default-thumbnail.gif);
  background-repeat: no-repeat;
  background-position: 50px 50px;
  height:  200px;
  width:  200px;
  background-color: #eee;
  margin-bottom: 50px;
}
.css-sprites-150 {
  background-image: url(default-thumbnail.gif);
  background-repeat: no-repeat;
  background-position: -50px -50px;
  height: 200px;
  width: 200px;
  background-color: #eee;
}

8. text  indent 【预览】

  • 为了美观及方便阅读，段落开头一般都要缩进两个字。
  • 网站logo部分定位也可以使用这种方式，将logo部分文字缩进-9999px，只显示logo图片，可参考 No.1 Web Design 。

text-indent

CSS代码

.text-indent{
  text-indent:50px;
}

9. Border Radius 【预览】

定义边框圆角
radius

CSS 代码

.border-redius{
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

10. z-index 【预览】

元素叠放的层级
z-index
CSS 代码

.z-index-1 {
  z-index: 999;
}
.z-index-2 {
  z-index: 1;
}
标签：