探究四大CSS属性用法

开发 前端
如果学会CSS属性的用法,可以为你解决不少问题,这里向大家简单描述一下CSS属性中几个常用属性的使用,主要包括DIV绝对定位属性,z-index属性,overflow属性和clip属性。

本文和大家重点讨论一下CSS属性中四个属性的用法,它们分别是DIV绝对定位属性,z-index属性,overflow属性和clip属性,每个属性都有各自的特点和作用,相信通过本文的介绍你对它们的用法会有一个全面的认识。

四大CSS属性用法

◆DIV绝对位置属性:

CSS属性种DIV绝对位置属性有四个属性:top、right、bottom和left,属性值为长度单位或百分数:

属性名称:'top'、'right'、'bottom'、'left'

属性值:<length><percentage>auto

初始值:none

适合对象:所有元素

是否继承:no

百分比备注:被禁止

利用以上属性,用户就可以精确定义元素的位置,如:

  1. <PstylePstyle="position:relative;margin-right:10px;left:10px;"> 
  2. Iusedtworedhyphenstoserveasachangebar.They  
  3. will"float"totheleftofthelinecontainingTHIS  
  4. <SPANstyleSPANstyle="position:absolute;top:auto;  
  5. left:0px;color:red;">--</SPAN> 
  6. word.</P> 

◆z-index属性:

在CSS中允许元素的重叠显示,这样就有一个显示顺序的问题,CSS属性中的z-index属性描述了元素的前后位置,如果把电脑屏幕看作X-Y平面的话,那么Z轴就是垂直于屏幕的,z-index使用整数表示元素的前后位置,数值越大,就会显示在相对靠前的位置,并且CSS同意在z-index中使用负数。

属性名称:'z-index'

属性值:auto<integer>

初始值:auto

适合对象:使用position属性的元素

是否继承:no

百分比备注:被禁止

◆overflow属性:

在规定元素的宽度和高度时,如果元素的面积不足以显示全部内容的话就要用到CSS属性中的overflow属性:

属性名称:'overflow'

属性值:visiblehiddenscrollauto

初始值:visible

适合对象:元素的position属性

是否继承:no

百分比备注:被禁止

属性值含义如下:

visible:扩大面积以显示所有内容。
hidden:隐藏超出范围的内容。
scroll:在元素的右边显示一个滚动条。
auto:当内容超出元素面积时,显示滚动条。

◆clip属性:

CSS属性中还提供了一种clip属性,可以把元素区域剪切成各种形状,但目前提供的只有方形一种:

属性名称:'clip'

属性值:<shape>auto

初始值:auto

适合元素:元素的position属性被设为absolute

是否继承:no

百分比备注:被禁止

<shape>值为rect(toprightbottomleft)。

【编辑推荐】

  1. 实用但IE不支持的十个CSS属性
  2. 解析四大CSS属性值选择器用法
  3. CSS中border和clear两大属性用法揭秘
  4. 简单实用的五个CSS属性
  5. 解读DIV CSS网页布局中CSS无效十个原因
责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-09-02 15:12:28

CSS属性值选择器

2010-08-25 14:26:09

CSSdisplay

2010-09-03 13:02:04

CSSposition

2010-09-10 09:22:50

DIV布局

2010-08-17 09:20:28

DIV布局

2010-08-17 10:31:10

DIV布局属性

2010-09-02 15:25:41

CSSfont-size

2010-09-15 14:00:06

position属性DIV

2011-03-21 09:01:49

CSS框架

2010-08-05 10:22:46

Flex效果

2010-08-26 10:08:50

CSSmargin

2010-07-14 14:46:57

Perl操作符

2010-08-30 10:58:19

DIV CSSfloat

2010-07-05 11:12:43

常用UML图

2010-09-02 10:12:34

CSS导航

2010-09-15 13:50:04

CSSposition属性

2015-07-17 09:50:16

Carthage优劣比较

2010-09-06 11:11:31

CSS定位

2010-08-26 10:48:51

CSScaption-sid

2010-09-08 14:00:08

marginCSS
点赞
收藏

51CTO技术栈公众号