###定位方式4+1
###position定位
靜态定位(文檔流定位):是元素的預設定位方式
格式:position:static
元素顯示特點: 塊級元素從上到下排列,行内或行内塊元素從左向右排列,元素不易實作層疊效果
如何控制元素的位置: 通過外邊距.
相對定位
格式:position:relative
元素顯示特點: 元素不脫離文檔流(元素不管顯示到什麼位置 仍然占着原來的位置)
如何控制元素的位置: 通過top/left/right/bottom控制元素的顯示位置,坐标相對于初始位置
應用場景: 當需要移動某個元素,但移動該元素時不影響其它元素的顯示效果,這時使用相對定位,如果做位置微調使用相對定位
絕對定位
格式: position:absolute
元素顯示特點: 元素脫離文檔流(當元素設定為絕對定位時會讓出自己所占的位置)
如何控制元素的位置: 通過top/left/right/bottom控制元素位置,坐标相對于視窗(預設)或某一個上級元素(添加相對定位)
應用場景:如果移動到的位置是某個上級元素的角落使用絕對定位,如果需要往頁面中添加一個元素而且不希望影響現有的顯示效果(也就是不在文檔流裡面)使用絕對定位
固定定位
格式: position:fixed;
元素顯示特點: 元素脫離文檔流
如何控制位置: 通過top/left/rigth/bottom控制元素位置,坐标相對于視窗.
應用場景: 需要将元素固定在視窗的某個位置,并且不随着内容位置改變而改變
####浮動定位
格式: float:left/right;
顯示特點: 元素脫離文檔流,元素從目前行向左或向右浮動,當撞到上級元素邊緣或其它浮動元素時停止
如何控制元素位置: 通過外邊距
如果元素的所有子元素全部浮動,則元素自動識别的高度為0,通過給元素添加overflow:hidden解決.
應用場景: 當需要将縱向排列的元素改成橫向排列時使用浮動定位
###行内元素的對齊方式vertical-align
top 頂部對齊
bottom 底部對齊
middle 中間對齊
baseline 基線對齊(預設)
####布局練習步驟:
給big設定寬度1000 并通過外邊距0 auto居中
第一行裡的div設定寬高一個左邊浮動 一個右邊浮動
第一行和第二行div都設定overflow:hidde
第二行裡面的div設定寬高,一個左邊浮動,剩下3個
右邊浮動
練習
1.相對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
div:hover{
/* 如果是預設的靜态定位,元素通過外邊距
移動其它元素會受影響 */
/* margin: 20px 0 0 20px*/
/* 修改成相對定位 */
position: relative;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
顯示效果:
2.絕對路徑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
#d1{
/*設定絕對定位脫離文檔流讓出所占位置*/
position: absolute;
/* 坐标相對于視窗而非自身位置 */
right: 0;
bottom: 0;
}
#big{
width: 200px;
height: 200px;
background-color: red;
position: relative;/* 做位置參考 */
}
#middle{
width: 100px;
height: 100px;
background-color: green;
margin: 50px 0 0 50px;
}
#small{
width: 50px;
height: 50px;
background-color: blue;|
position: absolute;
right: 0;
top: 0;
</style>
</head>
<body>
<div id="big">
<div id="middle">
<div id="small">
</div>
</div>
</div>
<div id="d1">
div1
</div>
<div id="d2">
div2
</div>
<div id="d3">
div3
</div>
</body>
</html>
3.絕對定位練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#i1{
width: 100%;
}
#i2{
width: 100px;
/* 絕對定位,相對于上級div */
position: absolute;
right: 0;
top: 0;
}
#d1{
border: 1px solid red;
position: relative;/* 參照物 */
}
</style>
</head>
<body>
<h1>測試絕對定位</h1>
<div id="d1">
<img id="i1" src="../晚課/web01/images/back.jpg" >
<img id="i2" src="../day01/abc/3.png" >
</div>
</body>
</html>