发表于: 2017-03-04 22:56:43

2 993


今日完成:.

开始学习任务五,完成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标签的了解,以及布局方式。



返回列表 返回列表
评论

    分享到