发表于: 2017-03-12 16:15:39
2 595
今天完成的事情:
了解flex布局,背景图的缩放,移动端fixed失效的解决方案,图片和文本的垂直居中。
明天计划的事情:
开始任务六。
遇到的问题:
1.头部header里直接放图标img和文本span,设置vertical-align无效,不得不在img外层加一个div,vertical-align生效。需要垂直居中就执着于vertical-align,不习惯用margin和padding实现。用到图片直接用img,不习惯将img裹在一个div里实现。
2.头部里的返回图标img,开始用的是左浮动float,文本“个人主页”就没法在header里水平居中,而是在img右边的剩余空间里水平居中。经查float脱离文档流时,其他盒子会无视这个元素,但其他盒子里的文本会为这个元素让出位置,而absolute脱离文档流的元素,其他盒子和其他盒子里的文本都会无视它。改用absolute解决。
3.背景图用background-size:100%时,由于设置的no-repeat,背景区域高度大于背景图高度时,下方会出现空白,改为background-size:100% 100%,背景图又会拉得稍长了,然后改为background-size:cover实现,背景图扩展完全覆盖背景区域。
4.“自我介绍”右边那栏较多的文字,窗口变窄时,文字会都跳到下一行。看其他学员说可以用flex布局,于是设置弹性项目flex:1解决(flex:1 1 0%)。参考链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html和https://segmentfault.com/q/1010000004080910/a-1020000004121373。
5.听说移动端fixed布局容易出现问题,不太清楚就查了下,移动端软键盘唤起后,页面的fixed元素会失效,且随页面滚动而滚动,解决失效的fixed元素滚动问题思路是,将body滚动区域移到main内部,参考链接http://efe.baidu.com/blog/mobile-fixed-layout/。目前没有尝试过这个问题,是不是移动端尽量不用fixed定位呢。
收获:
学会了图片的垂直居中,应用float和absolute对其他盒子里文本的影响,背景图像的background-size属性值cover和contain,去掉列表项项目符号list-style-type:none,了解flex布局,了解移动端fixed元素失效的一般解决方案。
(os:点击提交时提示登录异常而不得不重写一遍日报时→_→[无比嫌弃的眼神])
评论