发表于: 2016-10-24 23:02:11

1 627


今天完成的事情:

1、重新修改了任务5-1;

2、和大师兄讨论了任务7-2头部放置图片的底部白边问题。

3、修改了个人的主页。

明天计划的事情:

任务10

遇到的问题:

任务5-1,对于图片垂直居中问题还是找不到好的方法,最后是通过定位来解决的。感觉不是很精确,只是看着像,不是很严谨。

对于“自我介绍”部分,采用了vertical-align:middle。但是必须左边和右边同时设置这个才有效,不知为什么,求解释。

任务7第二个页面,和王峰大师兄讨论头部放背景图片的问题。代码:

<div><img src="#"></div>

现象:图片底部和它的父容器底部有间隙

解决方法:font-size:0或者:图片display:block;也可以解决问题。

解释:这个不是bug,图片下面有空白是正确的,因为图片是内联元素,排布的时候不是和父元素底部对其,而且和baseline对齐,baseline和父元素底部一般是有距离的,所以会产生白边。

收获:

1、本来以为修改任务5-1很简单,结果花了好几个小时。看来真是不能小看css部分的任务。因此,个人觉得,很有必要不断温故以前的代码;

2、了解了容器里面放置图片应该注意把图片的line-block属性,改为block属性,或者把父容器字体设为0的解决方法。加之以前讨论了line-block产生空格的问题,觉得有必要重新认识line-block属性。感觉,line-block虽然兼顾了Line和block的属性,但是自身还存在着我们难以理解的问题。不知当初设计这个元素的开发人员是基于什么目的才导致了空格问题的产生呢?或许,这就是line-block兼顾line和block所付出的代价吧,又或许正是这个空格导致了它具有两者属性的原因吧。



返回列表 返回列表
评论

    分享到