CSS2

九、定位属性

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 onmouseover="this.className='min'" onmouseout="this.className='mout'">菜单1</div>
</a>
<a href="http://www.kekeyun.com">
<div onmouseover="this.className='min'" onmouseout="this.className='mout'">菜单1</div>
</a>
<a href="http://www.kekeyun.com">
<div onmouseover="this.className='min'" onmouseout="this.className='mout'">菜单1</div>
</a>
//onmouseout 事件会在鼠标指针移出指定的对象时发生。

 

 十二、布局属性

Display:none|block （不占位）

Float:left right

Clear:left|right both

Visibility:hidden|visible(占位)