发表于： 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标签的了解，以及布局方式。
返回列表
评论