九、定位属性
position: relative | absolute | static | fixed
static 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
relative 不脱离文档流,参考自身静态位置,通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position 为 static 时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
fixed 固定定位,这里他所固定的对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
ps:如果想要元素以父元素进行定位,则父元素必须为relative
CSS中定位的层叠分级:z-index: auto | number
auto 遵从其父对象的定位
number 无单位的整数值。可为负数。z-index使用整数表示元素的前后位置,数值越大越靠前
Position:static|relative|absolute|fixed
Relative相对定位
相对于原来所在位置进行偏移
Left top right bottom
Absolute 绝对定位
在父元素里面没有relative 时候相对于body 的border
如果父元素里面position :relative
他的定位会相对于设置相对定位的父元素进行偏移
十、div盒子原理
只有width可以用来显示内容,如果内容的宽度不够,则会将内容挤出来
margin属性用来设置div之间的间距,padding属性用来设置padding的大小
十一、js控制css
<style type="text/css">
div{
border:#30F solid 1px;
width:120px;
height:40px;
float:left;
line-height:30px;
background-color:#9F0;
margin-left:5px;
text-align:center;
color:#FFF
}
.min{
background-color:#F00;
}
.mout{
background-color:#9F0;
}
</style>
<a href="http://www.kekeyun.com">
<div οnmοuseοver="this.className='min'" οnmοuseοut="this.className='mout'">菜单1</div>
</a>
<a href="http://www.kekeyun.com">
<div οnmοuseοver="this.className='min'" οnmοuseοut="this.className='mout'">菜单1</div>
</a>
<a href="http://www.kekeyun.com">
<div οnmοuseοver="this.className='min'" οnmοuseοut="this.className='mout'">菜单1</div>
</a>
//onmouseout 事件会在鼠标指针移出指定的对象时发生。
十二、布局属性
Display:none|block (不占位)
Float:left right
Clear:left|right both
Visibility:hidden|visible(占位)