css基础--区域组件与立方空间的建立

区域组件

l        DIV标签

DIV ID=指定样式名称>…

DIV CLASS=指定样式类别名称>…

width与height 属性

       width、height: <length> | <percentage> | auto</percentage> </length>

l        SPAN标签

SPAN ID=指定样式名称>…<!---->

SPAN CLASS=指定样式类别名称>…<!---->

 

l        DIV与SPAN标签的差异

DIV会自动换行

SPAN不会自动换行

区域位置

Top、left属性

top、left: <length> | <percentage></percentage> </length>

Position位置属性

       position: absolute (绝对的) | relative（相对的） | static(静态的)

       eg) position: absolute; top:0; left:0

三维空间的建立

z-index层次属性

       z-index: auto | <integer></integer>

      

Auto	即自动层次效果。若没有设置z-index时，区域中有重叠的部分，将以HTML源代码的顺序来划分，越后面的其层次越高
<integer></integer>	设置整数值。当z-index的整数值越大时，区域的层次越上层，即区域上层的内容，会覆盖下一层的内容；

通过z-index可以设置文字阴影效果

       eg)  .z1 {font-size: 60pt; color: #8b0000;"">楷体;position: absolute; top:2cm; left:2cm; z-index:2}

              .z2 { font-size: 60pt; color: #A9A9A9;"">楷体;position: absolute; top:2.05cm; left:2.05cm; z-index:1}

通过z-index可以设置文字三维效果

       eg)  .z1 {font-size: 60pt; color: #8b0000;"">楷体;position: absolute; top:2cm; left:2cm; z-index:3}

              .z2 { font-size: 60pt; color: #A9A9A9;"">楷体;position: absolute; top:1.93cm; left:1.93cm; z-index:2}

.z3{ font-size: 60pt; color: #A9A9A9;"">楷体;position: absolute; top:2.05cm; left:2.05cm; z-index:1}