发表于: 2019-03-02 20:05:54

1 739


          今天完成的事情:今天终于完成了任务六。

     由于一开始没有构思,将文字信息用列表标签完成,再添加图片后界面很难控制,然后把ui图里的内容由上到下一步一步地尝试,一步一步地出错,改正。最终完成了任务。最后看了下任务七的介绍,一脸懵逼,还在摸索中。

     另外今天还学习了下margin折叠的问题。

     margin折叠的产生有几个条件:

     这些margin都处于普通流中,并在同一个BFC中;

    这些margin没有被非空内容、padding、border 或 clear 分隔开;

     这些margin在垂直方向上是毗邻的,包括以下几种情况:

     1、一个box的top margin与第一个子box的top margin

     2、一个box的bottom margin与最后一个子box的bottom margin,但须在该box的height 为auto的情况下

  •    3、一个box的bottom margin与紧接着的下一个box的top margin
       4、一个box的top margin与其自身的bottom margin,但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box
  •   垂直方向上毗邻的box不会发生折叠的情况:

    折叠边距的计算

    当两个margin都是正值的时候,取两者的最大值;当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从 0 位置,负向位移;当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。但必须注意,所有毗邻的margin要一起参与运算,不能分步进行。




明天计划的事情:开始任务七。先学习一下css scripe,也就是雪碧图。将任务中需要用到的图片先做成雪碧图。任务七一共有三张图,先完成版本选择那张。

遇到的问题:任务六的ui图底部固定中间两个图片,一开始我用了绝对定位来实现。后来在师兄的知道下用flex实现更简单,代码量更少。自己试验了一遍,最终成功了。

收获:学习新的事物,一定要多踩坑,踩的多了,填的也就多了。



返回列表 返回列表
评论

    分享到