发表于: 2018-09-03 23:54:39
1 730
今天完成的事:
1. 完成了任务7 的首页,相对比较简单,没什么太大的问题。
2. 按照师兄提供的方法,总结回顾了以前的任务,理清了任务的大致思路,实现方式,以及涉及到的一些关键知识点等,主观上对css的认识稍微进步一些,梳理了一下知识脉络,理清了一些困扰我许久的问题,今天虽然没有学什么新东西,但是收获还是不少,温故而知新。
感觉用笔写字的时候思路更清晰,所以笔记全都手写在纸上了,下面是任务思路整理部分(估计只有我自已能看懂)。
以下图片都省略了。
明天计划的事
1.继续写任务8。
2.继续整理以前的任务。
遇到的问题:
0. 关于图片和文字中右分布且垂直居中的问题。
a. 这种布局打斗出现在头部,一般情况下父元素的宽度都不会是固定的,使用table-cell=vertical-align将文字和图片垂直居中后,父元素的百分比宽度就不顶用了。
b. position是一个很好的选择,position+transform或者margin-top:负子元素高度的一半, 可以完美的达成垂直和水平的居中。但是在屏幕宽度很小的情况下,水平居右的图片可能会覆盖到水平居中的文字上面。暂时没找到破解方法。
c. 利用float+text-align:center也可以完成布局,但是这里面居中的文字并没有在父元素中真正的居中,看下图:
d. 知道子元素的高度也知道父元素的告诉,可以直接用margin:(父元素高-子元素高)/2 - (子元素高/2)这样垂直居中不?
1. 自适应的时候一般都会对htm设置font-size: 625%. 但是这不可避免的会带来一个问题,就是文字字号的过大会给div等元素带来多余的空格,有时候会对布局带来不好的影响,这时候会需要多余的代码去除空格,有点麻烦啊,有没有比较好的方式解决这个问题。
收获:
如上.
评论