今天在这里给大家总结几个我在制作一个页面时所用到的一些不太常用的属性,但有时候使用这些属性能增加页面的可观性以及减少其他复杂的操作使用.
z-index属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
- 1.元素可拥有负的 z-index 属性值。
- 2.Z-index 仅能在定位元素上奏效（例如 position:absolute;）
我们这里举几个栗子来说明一下该属性的一些隐含作用:
例1:
即son1和son2是parent的两个子元素，效果图如下：
这是没有使用z-index，我们发现son2在son1之上，这是因为son2在html中排在了son1之后，所以后来者将前者覆盖，如果我们颠倒以下两者的顺序，就会发现蓝色(son1)在上了。
例2：
在父元素添加z-index:10;
在son1和son2添加z-index:5; 这样理论上父元素就会在上面（黄色覆盖蓝色和黄色）；
结果如下：
结果没有变!!!!! 这就说明父元素和子元素不能做z-index的比较！！！但真的是这样吗？看下一个例子：
例3：
把两个子元素的z-index值同时设置为-5；父元素不设置z-index属性。结果如下：
成功！！说明在父元素和子元素之间还是可以作比较的！！！只是需要我们把子元素的z-index值设为负数。
cursor属性
cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
| 默认值： | auto |
|---|---|
| 继承性： | yes |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.cursor="crosshair" |
可能的值
| 值 | 描述 |
|---|---|
| url | 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
calc() //一般用做动态设置宽高的一个函数
说明：
calc() = calc(四则运算) ---------------用于动态计算长度值。
- 需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)； - 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
.div_bodyin1{
position: absolute;
width: 208px;
height: calc(100% - 40px);
left: 0;
}transition 属性
语法
将鼠标悬停在一个div元素上，逐步改变表格的宽度从100px到300px.
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
该属性一般伴随一个:hover 选择器
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover
{
background-color:yellow;
}
例:
选择未访问、已访问、悬浮和活动链接，并设置它们的样式：
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}
一个综合的例子:
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
}
div:hover
{
width:300px;
}content属性
定义和用法
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
content:"string字符串类型";
说明
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
| 默认值： | normal |
|---|---|
| 继承性： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.content="url(beep.wav)" |
min-width属性和max-width属性以及max-height属性和min-height属性
min-width:50px 最小宽度为50px
max-width:50px 最大宽度为50px
min-height:50px 最小高度为50px
max-height:50px 最大高度度为50px
CSS样式结构
div{min-width:50px} div{max-width:50px}
div{min-height:50px} div{max-height:50px}
onblur与onfocus事件
onblur属性在元素失去焦点时触发，onblur常用于表单验证代码（例如用户离开表单字段）。
onfocus属性在元素获得焦点时触发，onfocus常用于<input>、<select>以及<a>。
******但是需要大家注意的是这两个属性只有应用于表带控件时才起作用. ******
tabindex 标签
带有指定 tab 键顺序的链接,获得光标的顺序
该属性可指定0,1,2之类的数值,浏览器会根据数值大小进行比较从而得到控件获得光标的顺序,数值越小越最先获得光标,也可以指定为负值,负值属性的控件最后执行.该控件可伴随着onblur事件一起应用在某个div上,从而能让div触发失去光标事件,摆脱了onblur事件最对表单控件起作用的限制.