现代 CSS

5个简单,但非常有用的属性

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

Webdesignerwall.com逛时,看到一篇文章《5 Simple, But Useful CSS Properties 》一文,细看以之后真的很有用,这几个属性大家都有见过,也很常用,但有几个人会认为他很有用呢?不信,我们来一起看看。

5 Simple, But Useful CSS Properties 》原文是这么描述的

“这篇文章是关于5个用的CSS属性,你应该非常的熟悉,但很有机能你很少在使用。我不是在讨论CSS3的新属性,我所指的是CSS2中的老属性:clip,min-height,white-space,cursor和display。这些属性都得到浏览器的广泛支持。所以,不要错过这篇文章,因为你可能会惊讶的发现这5个属性是多么的有用。“

我看了之后也觉得很惊讶,很有意思,属性虽然简单,但有时候我们往往忽略这些简单属性的运用,于是今天我借花献佛,将这篇文章简单的译成中文,放在w3cplus上,希望对同学们有所帮助。

1、clip

clip属性就像一个朦板一样,它允许你的让元素的内容在这一个矩形的图形中。使用clip属性时你需要注意两点:第一将元素设置为“position:absolute”;第二指定元素的定位值“top,right,bottom,left”,如图所示:

接下来看两个实例:

图片剪切(DEMO

这个实例是用clip来制作一个图片剪切的效果,首先你要在图片的父元素,例如“<div>”上定义属性“position:relative”,接下来在“<img>”上定义“position:absolute”,并使用rect的属性值,如:

具体代码如下所示:

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

上面效果是直接剪切图片,但有时候我们还想让图片进行比例的剪切,那么只需要在上面的案例基础上做一下调整,具体看下面的案例

图片缩放与剪切(DEMO

在这个DEMO中,缩放显示图片,首先默认图片是一张矩形图片,并在这个基础上实现50%的缩放。因此在这处图片设置了一个“width”和“height”值,并使用clip属性进行剪切,如:

对应代码如下:

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

注意,在IE8以及其以下的版本,在使用clip属性时需要注意语法:

clip (top,right,bottom,left);

用逗号将其分开才会有效。

有关于图片的缩放效果,早期w3cplus在《纯CSS制作缩略图片》也做过详细介绍,其中一种方法就是使用今天介绍的clip制作的,有兴趣的同学可以看看。

2、最小高度min-height(DEMO)

“min-height”属性可以让你确定一个元素的最小高度(IE6下需要另外处理),这个属性在制作布局中是非常有用的,比如说当你主内容区内容不够撑高容器与侧栏相同或者比侧栏高时,这个最小高度就很有用处,如:

代码很简单:

.with_minheight {
  min-height: 550px;
}

由于IE6不支持min-height属性,所以在IE6下我们需要做一定的处理:

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

详细的可以参考最小高度兼容代码,min-height

3、white-space(DEMO)

"white-space"属性主要用来控制元素的文本,例如,指定"white-space:nowrap"让你的文本不换行,如下面的示例图:

代码示例:

em {
  white-space: nowrap;
}

有关于更详细的介绍,大家可以点我

4、cursor(DEMO)

如果你对一个按钮改变了操作行为,最好也将鼠标形状也做一定的修改。例如,当你的按钮处理“禁用”时,你就应该将默认的鼠标变成不可点击(箭头)。如:

一起看一个简单的示例代码:

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5、display inline/block(DEMO)

“display”属性大家应该常用,我们可以使用这个属性,改变元素的显示风格,比如说通过“display”的“inline”将块元素变为行内元素,也可以通过“display”的“block”将行内元素变成块元素,如

示例代码如下所示:

.block em {
  display: block;
}

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

这五个属性是不是很简单,你有经常使用吗?或者说你会这么用吗?要是还没有,赶快动手吧。

英文地址:http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties

如需转载,烦请注明:http://www.w3cplus.com/css/5-simple-but-useful-css-properties.html

NIke Dunk SB MID
返回顶部