[上海|]JS-|2018年09月13日的日报-技能树.IT修真院

发表于： 2018-09-13 23:37:55

1 761

今天完成的事情：任务8页面一

明天的计划：对页面一做到响应式，写页面二

遇到的问题：

1、页面一内容区中的一块每个图标所在不同的div块，并且大小不一样，所以想了调整自身margin和padding的办法来做到统一，但是页面缩放的时候会改变位置，后面参考网上的办法，把图标外面套一个div块，全部设置成统一的大小，然后设置一个方向对齐，就能做到对齐了。然后右边的虚线也用了一点时间解决，虚线只能和元素的padding大小差不多高度，所以调整右边元素的padding的高度就行了，但是虚线嘛好像是没有居中的，要在两个div块的中间只能利用margin设置border，这样的话虚线就太长了。

2、用flex布局，画的圆形图标，如果后面的元素位置不够的话，会挤压到这个圆形图标，造成变形，

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

该属性来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。

flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。

3、

友情链接列表起初没有用栅格布局，页面缩小的话单单字体会换行，整个列表不会换行。解决方法：用了栅格布局后，设页面置小于992px后换行

收获：