发表于: 2019-03-22 20:11:40
1 827
今天完成的事情:
1.了解了position:relative, absolute, fixed 的区别
2.完成CSS任务三
明天计划的事情:
1.提交CSS任务3
2.学习input——创造最新式表单
3.开始CSS任务四
遇到的问题:
1.用了position:absolute后,text-align:center图片无法居中 如图,
解决方法,
收获:
1.absolute中的left与margin-left有什么区别
1)在有定位声明的情况下:即position:absolute,relative,fixed这几种情况下
(1)只有margin-left:这样子position的声明没有任何作用,因为即使声明了,也得靠left,top来调整位置,如果没有left等,则position失效,元素位置仍为其该在的位置,margin-left还是相对于其父元素的距离
(2)只有left等:正常情况
(3)同时有margin-left和left:这种情况下,定位是有作用的,在定位完成后margin-left再起作用,即margin-left和left是可以叠加的
2)在无定位声明或position:static的情况下
left等的定义无效,margin-left有效
综上:position的声明和left等的定义必须同时存在,缺少其中任何一方,都使得定位无效
2.文字和图片在垂直方向上居中对齐
1)将图片与文字放在同一容器内
2)使用text-align使容器内容居中
结果如图,
评论