###定位方式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>