发表于: 2017-03-04 22:56:43
2 996
今日完成:.
开始学习任务五,完成header、footer、上半部分布局的布局,学习flex,尝试用flex进行其余的布局。
明日计划
继续任务五,尝试用不同的布局方式完成任务。
遇到的问题:
昨天的任务四是用table布局完成了垂直与水平的居中。今天想换一种方式,于是将元素定义为line-block,然后想办法实现水平与垂直居中。
1.但是在设置文字时,尝试了很多方法,都没能实现垂直居中。究其原因是将文字装入span后,vertical-align: middle 属性是不能起作用的。最后将文字将文字所在块的height以及line-height设置为heade的rheight同等大小,实现了垂直居中。今天在这个问题上花了2小时,最后才发现vertical-align: middle是不能在div中实现的,汗。。。
2.header文字设置好以后一直有一个默认的magin,没办法取消。最后才发现是因为<p></p>有默认的上下边距,删除后解决。
收获:
1.flex属性的了解;
2.阅读《CSS自适应布局总结教程》,认真梳理各种布局的方式,优缺点。
3.开始理解各种标签属性所对应的布局方式,例如vertical-align: middle 最适合用于table;
4.footer标签的了解,以及布局方式。
评论