发表于： 2018-08-21 21:21:19
1 599
今天完成的事情：
1.学习了层模型的定位方式：
绝对定位：需要设置position：absolute，这条语句的作用是将元素从文档流中拖出来，然后使用left，right，top，bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{
width：200px；
height：200px；
border：2px red solid；
position：absolute；
left：100px；
top：50px；
}
相对定位： 需要设置position：relative。表示相对定位，它通过left，right，top，bottom属性确定元素正常文档流中的偏移位置。相对定位完成的过程是首先按照static方式生成一个元素，然后相对于以前的位置移动，移动的方向和幅度由left，right，top，bottom属性确定，偏以前的位置保留不动。
div{
width：200px；
height：200px；
border：2px red solid；
position：relative；
left：100px；
top：50px；
}
固定定位：fixed表示固定定位，他的相对移动的坐标是视图本身。由于视图本身是固定的，他不会随着浏览器窗口的滚动条滚动而发生变化，除非屏幕中移动浏览器窗口的屏幕位置。
div{
width：200px；
height：200px；
border：2px red solid；
position：fixed；
left：100px；
top：50px；
}
2.基本完成了任务5
3.开始了任务6的准备部分
明天计划的事情：
1.完成任务6
2.将任务5的深度思考弄懂
3.提交任务总结
遇到的问题：暂无
收获：学会了多种定位方法，还有垂直和水平居中的方法，对任务的进行非常有帮助。
返回列表
评论