简单实用的五个CSS属性

本文向大家介绍一下5个实用的CSS属性的使用，主要是clip，min-height，white-space，curosr和display等一些被所有浏览器广泛支持的属性，你应该很熟悉，但很可能很少会使用到，这里和大家分享一下其用法。

成都创新互联公司为企业级客户提高一站式互联网+设计服务，主要包括做网站、网站建设、app软件开发公司、重庆小程序开发公司、宣传片制作、LOGO设计等，帮助客户快速提升营销能力和企业形象，创新互联各部门都有经验丰富的经验，可以确保每一个作品的质量和创作周期，同时每年都有很多新员工加入，为我们带来大量新的创意。 

5个实用的CSS属性

这篇文章介绍了5个实用的CSS属性。你应该很熟悉，但很可能很少会使用到。我并不是在谈论展望全新的CSS3属性，我指的是旧的CSS2中的属性，如：clip，min-height，white-space，curosr和display等一些被所有浏览器广泛支持的属性。因此，千万不要错过这篇文章，因为你可能发现它们竟有如此之大的用途。

1、CSSClip

剪辑(clip)属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其position属性为absolute，然后指定相对于元素的top，right，bottom，left值。

图片剪辑实例（演示） 

以下示例演示了如何使用clip属性掩盖一张图片。首先，指定

元素为position:relative，然后指定 元素为position:absolute，并且根据实际需要设定rect值。 

  
 
 
 
    
   
  
  
  
  1. .clip{  
    2. 
   
  
  
  
  2. position:relative;  
    3. 
   
  
  
  
  3. height:130px;  
    4. 
   
  
  
  
  4. width:200px;  
    5. 
   
  
  
  
  5. border:solid1px#ccc;  
    6. 
   
  
  
  
  6. }  
    7. 
   
  
  
  
  7. .clipimg{  
    8. 
   
  
  
  
  8. position:absolute;  
    9. 
   
  
  
  
  9. clip:rect(30px165px100px30px);  
    10. 
   
  
  
  
  10. }  
    11. 
   
  
  
  
  11.  
    12.

#p#2、Min-height（演示）

min-height属性允许你指定元素的最小高度，适用于需要平衡布局的情况。我将它用于Job面板上，以确保内容区域高于侧边栏。

  
 
 
 
    
   
  
  
  
  1. .with_minheight{  
    2. 
   
  
  
  
  2. min-height:550px;  
    3. 
   
  
  
  
  3. }  
    4. 
   
  
  
  
  4.  
    5.

IE6的Min-heighthack

注：神奇的IE6原生不支持min-height属性，不过幸好有一个min-heighthack。

  
 
 
 
    
   
  
  
  
  1. .with_minheight{  
    2. 
   
  
  
  
  2. min-height:550px;  
    3. 
   
  
  
  
  3. height:auto!important;  
    4. 
   
  
  
  
  4. height:550px;  
    5. 
   
  
  
  
  5. }  
    6. 
   
  
  
  
  6.  
    7.

3、White-space（演示）

white-space属性指定了元素中空白的处理方式。比如，指定white-space:nowrap会阻止文本自动换行。

  
 
 
 
    
   
  
  
  
  1. em{  
    2. 
   
  
  
  
  2. white-space:nowrap;  
    3. 
   
  
  
  
  3. }  
    4. 
   
  
  
  
  4.  
    5.

#p#4、Cursor（演示）

如果你改变了按钮的行为，其指针也应该随之改变。比如，当一个按钮不可用时，指针应该改变为默认的箭头，来表明它不可点击。因此，cursor属性在开发Web应用程序时相当有用。

  
 
 
 
    
   
  
  
  
  1. .disabled{  
    2. 
   
  
  
  
  2. cursor:default;  
    3. 
   
  
  
  
  3. }  
    4. 
   
  
  
  
  4.  
    5. 
   
  
  
  
  5. .busy{  
    6. 
   
  
  
  
  6. cursor:wait;  
    7. 
   
  
  
  
  7. }  
    8. 
   
  
  
  
  8.  
    9. 
   
  
  
  
  9. .clickable:hover{  
    10. 
   
  
  
  
  10. cursor:pointer;  
    11. 
   
  
  
  
  11. }  
    12.

5、Displayinline/block（演示）

如果你不知道：块级元素是作为独立的一行来渲染的，而行内元素是在同一行被渲染的。

，

和

标签都是块级元素，，，都是行内元素。通过display:inline或block的方式，你可以重设这些元素的display样式。

      
    
    
    
    
       
     
     
     
  1. .blockem{  
    2. 
       
     
     
     
  2. display:block;  
    3. 
       
     
     
     
  3. }  
    4. 
       
     
     
     
  4.  
    5. 
       
     
     
     
  5. .inlineh4,.inlinep{  
    6. 
       
     
     
     
  6. display:inline;  
    7. 
       
     
     
     
  7. }  
    8.

【编辑推荐】

  1. CSS Sprites工作原理及优缺点
  2. CSS层叠与继承用法手册
  3. DIV布局规范中CSS类及id命名方式
  4. CSS网页布局中id与class命名规则
  5. 将XHTML+CSS页面转换为打印机页面技巧

 

责任编辑：佚名 来源： blueidea.com CSS

分享标题：简单实用的五个CSS属性
网页地址：http://www.csdahua.cn/qtweb/news35/222435.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

关键词优化知识

行业网站建设

广汉锦华橡塑　　 　西部信息中心　　 　郫县网站建设　　 　seo优化排名　　 　联通机柜租用　　 　圣与卓设计　　 　网站建设方案　　 　企业网站维护　　 　广安网站建设　　 　网站营销推广　　 　都江堰网站建设　　 　成都App定制　　 　响应式网站　　 　成都包装设计公司　　 　顺泽窗帘　　 　成都企业网站建设　　 　成都SEO优化公司　　 　光华服务器托管　　 　myfdjwx.com　　 　成都名片印刷