鼠標屬性
<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。若是寫的負值，則往相反方向
