发表于: 2018-05-19 23:40:10

1 699


今天完成的事:很可惜,没能完成任务六,但是学了很多东西。


明天的计划:继续任务六


碰到的问题:任务六的这个地方我是用相对定位做的,这是截得原图,,但是吧因为字体、三角和分割线三者之间间距不均匀,所以就用margin或者padding调试,在调试的时候我发现一个问题,三个盒子内的三个字因为长度不一样,所占据的空间不一样,比如我要把三角往边上靠,第三个盒子的三角已经靠到边了,第二个盒子的三角却还离分割线有一段距离,再靠一点,第三个盒子就崩了。。。难道为了三个不一样长度字我要再设三个类名,太蛋疼了,所以我放弃用定位,flex这么厉害干嘛不用呢,趁着东哥不在,赶紧问问别的大佬flex怎么用。基本上是边学边用,所以速度很慢,问题挺多的,但是想不起来了。


收获:1、 以前简单的看过flex,但是没有用过,今天又看了一遍,然后在编码时用flex替代以前常用的定位,真的是方便。display:flex大致能分为主轴justify-content和交叉轴align-items,以下为display:flex ...  justify-content的常用属性:

center:居中对齐;

flex-start:起始端对齐;

flex-end:末尾端对齐;

space-around:子容器沿主轴均匀分布,子容器到父容器的距离是子容器间距的一半。

space-between:子容器沿主轴均匀分布,收尾子容器与父容器相切(今天用的就是它)。


这是display:flex ... align-items的常用属性:

center:居中对齐(对的,就这个用的最多了)



        2、学习了子类选择器的两种最常用的用法,我用着还是很生疏,,很多理解可能还不透彻,还请师兄多多指导。

                2.1、选择需要的父级名称,再选择其子级,之后就可以给子级设置相对应的属性,比如:h1>span>span{}。就是作用于h1标签里span父标签里的span子标签,如果有好几个span父标签,下面的span子标签都会生效,适合对一个父级内有需要设很多类名但类名属性又有相同之处的情况下使用。

                2.2、第二种方式在没有指定父级的情况下可以作用于所有父级内的的x行的相同子级标签,所以一定要注意父级,代码格式:.xxx>span:nth-child(x){}。


返回列表 返回列表
评论

    分享到