发表于： 2020-04-10 23:40:27
1 1486
今天完成的事情
- 任务 5 基本完成。
- 了解了一下 flex，用来居中。
- 根据谷歌、火狐和 ie 的展示效果进行调整。
明天计划的事情
- 再整理下任务 5。
- 看下任务 6，了解下 bootstrap。
遇到的问题
- footer 处的两个按钮起初不能正常拉伸，之后用视口单位 vw 完成了。
- 最初我设置 main 的 margin-top 来让 main 一开始处于 header 下边，但是在 ie 上展示出来好像没用。后来把 main 的 margin-top 取消，给 main 的上半部分的 div 设置 margin-top 就解决了。
- 「自我介绍」这一行最开始没有头绪，之后用一个 div 包着两个 div，用 display: flex 和居中属性等完成了。
收获
用 flex 来居中，但是设为Flex布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
display: flex;justify-content : center ; /*水平居中*/align-items : center ; /*垂直居中*/视口单位。视口，是在浏览器中看到的部分页面，vw 为视口宽度，vh 为视口高度。1vh 等于视口高度的 1%，1vw 则为视口宽度的 1%。
返回列表
评论