Chinaunix首页 | 论坛 | 博客
  • 博客访问: 465914
  • 博文数量: 88
  • 博客积分: 1677
  • 博客等级: 上尉
  • 技术积分: 667
  • 用 户 组: 普通用户
  • 注册时间: 2011-11-03 22:17
文章分类

全部博文(88)

文章存档

2013年(1)

2012年(18)

2011年(69)

分类: 系统运维

2011-11-11 11:53:33

转载:
内容提要: 这篇文章是5个你应该很熟悉的有用的CSS属性,但很可能会很少使用。我不是 在谈论新的设想的CSS3属性。我指的是旧的CSS2中的属性,如:clip, min-height, white-space, cursor, 和 display,这些被所有的浏览器广泛支持。所以,不要错过这篇文章因为你可能会惊讶他们是多么有
  

  这篇文章是5个你应该很熟悉的有用的CSS属性,但很可能会很少使用。我不是在谈论新的设想的CSS3属性。我指的是旧的CSS2中 的属性,如:clip, min-height, white-space, cursor, 和 display,这些被所有的浏览器广泛支持。所以,不要错过这篇文章因为你可能会惊讶他们是多么有用。


1.CSS Clip

  Clip属性就像一个面罩。它允许你在掩盖矩形元素的内容。要剪辑一个元素:你必须指定position为absolute。然后,指定相对于元素的top,right,bottom,和left的值。

图像剪辑实例()

  下面的示例将演示如何使用clip属性掩盖图片。首先,指定

元素position:relative。然后,指定元素position:absolute和相应的边距。

 

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

 

图像调整和剪辑(

  在这个例子中,我将告诉你如何调整和剪辑图像。我的原图像为矩形格式。我想按50%的比例缩小它来创建一个正方形的格式的缩略图库。所以,我用的width和height属性来调整图像和用clip属性来掩盖他们。然后,我用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;
}


2.Min-height(

  min-height属性允许你指定元素的最小高度。但你需要平衡布局的时候它就很有用了。我在我的上使用它来确保内容区域总是高过侧边栏。

 

.with_minheight {
min-height
: 550px;
}

 

IE6的min-height hack

  注:min-height不支持IE6的,但这里有一个。

 

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


3.White-space(

  White-space属性指定一个元素如何处理空白。例如,指定white-space:nowrap将会防止文本从一行包裹到下一行。

 

em {
white-space
: nowrap;
}

 

4. Cursor (演示)

  如果您更改按钮的行为,你也应该改变光标。 例如,当一个按钮被禁用,光标应改为默认(箭头),以表明它是无法点击。 因此, cursor属性对开发web应用程序非常有用。

 

.disabled {
cursor
: default;
}

.busy
{
cursor
: wait;
}

.clickable:hover
{
cursor
: pointer;
}

 

5. Display inline / block ()

  也许您不知道块元素呈现在一个新行,而内联元素是呈现在同一行。

标签是块元素的例子。内联标签的例子有:, 和。用户也可以通过指定显示的显示样式:inline或block。

 

.block em {
display
: block;
}

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

 

阅读(1245) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~