###定位方式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>
显示效果:
