鼠标属性
<title>Document</title>
<style type="text/css">
p:hover{
cursor:pointer / hand / help ;
//手-手-问号
}
</style>
</head>
<body>
<p>你好</p>
</body>
</html>
定位属性
指定某一个元素的位置 -- position：
a.绝对定位：原点在父容器的左上角
属性：
left：xxpx;
top:xxpx;
b.相对定位：相对于自己原来的位置(左上角为原点)
属性：
left：xxpx;
top:xxpx;
<a href =#a >绝对定位示例</a>
<a href =#aa >相对定位示例</a>
- 顺序流：所有标签的初始排列顺序称为顺序流
- 脱离顺序流：当把控件设置为脱离顺序流的时候它就不按原来的顺序排列了，即当做页面上没有这个顺序流了。
- 两种情况标签脱离了顺序流
- 当把控件的位置设置为绝对定位（即此时该控件的前后控件不受该控件的位置影响了）
- 当设置控件的float属性的时候。
float 属性
float:none（默认）/ left / right
clear：none /both / left /right (通常用both);
//不允许有浮动
代码
使用float之前
使用float
效果
即使用float使这两个控件都脱离顺序流
overflow 属性
盒子中的内容超出类范围
属性 overflow：auto / visible /hidden； // 浏览器自己加滚动条 / 超出了也会显示 / 超出的隐藏
overflow
z-index 属性
z-index
<style type="text/css">
*{
padding:0px;
margin:0px;
}
div{
width:200px;
height:200px;
}
#d{
position:absolute;
left:100px;
top:100px;
background-color:red;
z-index:1000;
}
#d1{
background-color:green;
position:absolute;
left:200px;
top:200px;
z-index:5;
}
</style>
</head>
<body>
<div id = d ></div >
<div id = d1></div>
</body>
</html>
只需要将要在上面的那个的z-index的值设置大一点就行，此例中红色的z-index较大故覆盖在上面
<a name = a></a>
绝对位置示例
例如在父容器中：
<style type="text/css">
*{
padding:0px;
margin:0px;
}
div{
position:absolute;
left:20px;
top:20px;
width:200px;
height:200px;
border:1px solid red;
}
<body>
<div></div>
</body>
以父容器为原点
p{
position:absolute;
left:20px;
top:20px;
}
<div>
<p>你好</p>
</div>
现在变成以div容器为父类
<a name = aa></a>
相对位置示例
相对位置示例
示例图
此时下面的盒子是以自己原来的位置(左上角为原点)，此时因为加了"left：50px"故向右偏了50px。若是写的负值，则往相反方向
网友评论