代码改变世界

5个简单但很有用的CSS属性

2009-12-10 17:37  我不只是糊涂  阅读(141)  评论(0)    收藏  举报
  • 来源页面: http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/
  • 资讯原标题: 5 Simple, But Useful CSS Properties
  • 资讯原作者: Nick La
  • 中文来源:http://flash.9ria.com/thread-41152-1-1.html

    •  

     这篇文章是关于5个有用的CSS属性的，也许你很熟悉但是却不常用。我不是将新兴的CSS3的属性，而是指CSS2的属性，例如：clip, min-height, white-space, cursor和display，他们被各种浏览器支持。所以，千万不要错误这篇文章哦，因为你将发现一些非常有用的东西。


    1. CSS Clip
    clip属性像是一个遮罩。它允许你在一个矩形内遮罩一个元素内容。要修剪一个元素，你必须指明position为absolute，然后指明top, right, bottom和left相对于元素的值。

    图像修剪实例(demo)

    下面的实例演示了如果使用clip属性遮罩一个图像。首先，指明<div>元素的position:relative。下一步，指明<img>原色的position:absolute和相对的矩形值。
    1. .clip {
    2.   position: relative;
    3.   height: 130px;
    4.   width: 200px;
    5.   border: solid 1px #ccc;
    6. }
    7. .clip img {
    8.   position: absolute;
    9.   clip: rect(30px 165px 100px 30px);
    10. }
    复制代码
    图像调整大小与修剪(demo)
    在这个例子中，我将给你演示如何调整图像的大小并修剪图像。我原来的图片是一个矩形格式。我希望将它缩小50%来创建一个正方形格式的缩略图。因为，我使用width和height属性来调整图像的大小，然后使用clip属性来做遮罩。然后，我使用left属性来将图片左移15px。
    1. .gallery li {
    2.   float: left;
    3.   margin: 0 10px 0 0;
    4.   position: relative;
    5.   width: 70px;
    6.   height: 70px;
    7.   border: solid 1px #000;
    8. }
    9. .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(demo)

    min-height属性允许你指定元素的最小高度。在你需要平衡布局时非常有用。我在我的工作经历中使用了它，以确保内容区域始终比工具条要高。
    1. .with_minheight {
    2.   min-height: 550px;
    3. }
    复制代码
    IE6的Min-height hack
    注意：IE6不支持min-height，但是有一个min-height hack。
    1. .with_minheight {
    2.   min-height:550px;
    3.   height:auto !important;
    4.   height:550px;
    5. }
    复制代码
    3. White-space(demo)
    white-spcae属性指明如何处理元素的空白间隔。例如，指明white-space: nowrap将阻止文本换行。
    1. em {
    2.   white-space: nowrap;
    3. }
    复制代码
    4. Cursor (demo)
    如果你改变一个按钮的行为，同时你也会更改它的鼠标样式。例如，如果按钮不可用，那么鼠标将变成默认样式(箭头)，指示按钮不可被点击。因此，cursor属性在web应用开发中是非常有用的。
    1. .disabled {
    2.   cursor: default;
    3. }

    5. .busy {
    6.   cursor: wait;
    7. }

    9. .clickable:hover {
    10.   cursor: pointer;
    11. }
    复制代码
    5. Display inline / block (demo)
    也许你不知道的：block的元素是在心的一行渲染的，然而inline的元素是在同一行渲染的。 <div>, <h1>和<p>标签是block元素的例子。inline标签的例子有：<em>, <span>和<strong>。你可以通过指明display:inline或block来重写display样式。
    1. .block em {
    2.   display: block;
    3. }

    5. .inline h4, .inline p {
    6.   display: inline;
    7. }
    复制代码