简单实用的五个CSS属性

开发 前端
这里向大家描述一下5个实用的CSS属性的用法,它们分别是clip,min-height,white-space,curosr和display等一些被所有浏览器广泛支持的属性。

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

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. position:relative;  
  3. height:130px;  
  4. width:200px;  
  5. border:solid1px#ccc;  
  6. }  
  7. .clipimg{  
  8. position:absolute;  
  9. clip:rect(30px165px100px30px);  
  10. }  
  11.  

#p#2、Min-height(演示)

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

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

IE6的Min-heighthack

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

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

3、White-space(演示)

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

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

#p#4、Cursor(演示)

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

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

5、Displayinline/block(演示)

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

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

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

【编辑推荐】

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


 

责任编辑:佚名 来源: blueidea.com
相关推荐

2022-11-01 15:57:44

2022-03-04 22:24:18

CSS网站开发前端

2023-02-13 15:09:01

开发webCSS技巧

2010-09-06 15:35:27

2023-07-26 07:51:30

CSSgap 属性

2010-09-01 13:55:14

CSS

2024-02-26 08:20:00

CSS开发

2023-12-08 08:50:21

CSS前端属性

2023-12-19 13:31:00

CSS前端技巧

2023-12-08 08:45:41

CSS属性颜色变换属性前端

2010-08-20 09:47:54

2023-07-24 15:24:00

前端CSS 技巧

2010-08-27 16:07:50

2023-07-05 07:25:31

Python功能布尔值

2023-05-04 23:54:02

JavaScrip代码技巧

2023-10-26 18:03:14

索引Python技巧

2015-12-21 10:53:38

网络边界安全信息安全策略

2022-12-06 17:18:42

2010-09-01 13:08:42

2023-11-08 08:43:08

calc函数CSS
点赞
收藏

51CTO技术栈公众号