【180网站】50-56

【day51】

1、页面居中的container.

     设置了width, height. 居中(margin: 0 auto). container中有两列式布局。分别为两个div设置width, 然后display: inline-block;

     但是左边的列设置vertical-align: top才可以。如果不是，将会出现在container下面，还会有溢出，为什么？！以后还是用浮动吧……

2、多卡牌部署。

       cards_container.append()就可以。

【day52】

3、如果在父元素设置浮动，子元素设置高度和宽度就不再有意义？必须用padding?而设置子元素浮动就没有这个问题？就是类似于下图的效果。

4、阴影效果：

box-shadow: 0px 1px 0 rgba(255,255,255,0.05) inset, 1px 0px 0 rgba(255,255,255,0.05) inset,
                1px 2px 0 rgba(255,255,255,0.05) inset, 2px 1px 0 rgba(255,255,255,0.05) inset,
                2px 3px 0 rgba(255,255,255,0.05) inset, 3px 2px 0 rgba(255,255,255,0.05) inset,
                3px 4px 0 rgba(255,255,255,0.05) inset, 4px 3px 0 rgba(255,255,255,0.05) inset,
                4px 5px 0 rgba(255,255,255,0.05) inset, 5px 4px 0 rgba(255,255,255,0.05) inset,
                5px 6px 0 rgba(255,255,255,0.05) inset, 6px 5px 0 rgba(255,255,255,0.05) inset,
                6px 7px 0 rgba(255,255,255,0.05) inset, 7px 6px 0 rgba(255,255,255,0.05) inset,
                7px 9px 0 rgba(255,255,255,0.05) inset, 8px 7px 0 rgba(255,255,255,0.05) inset,
                8px 9px 0 rgba(255,255,255,0.05) inset, 9px 8px 0 rgba(255,255,255,0.05) inset,

                -0px -1px 0 rgba(0,0,0,0.05) inset, -1px -0px 0 rgba(0,0,0,0.05) inset,
                -1px -2px 0 rgba(0,0,0,0.05) inset, -2px -1px 0 rgba(0,0,0,0.05) inset,
                -2px -3px 0 rgba(0,0,0,0.05) inset, -3px -2px 0 rgba(0,0,0,0.05) inset,
                -3px -4px 0 rgba(0,0,0,0.05) inset, -4px -3px 0 rgba(0,0,0,0.05) inset,
                -4px -5px 0 rgba(0,0,0,0.05) inset, -5px -4px 0 rgba(0,0,0,0.05) inset,
                -5px -6px 0 rgba(0,0,0,0.05) inset, -6px -5px 0 rgba(0,0,0,0.05) inset,
                -6px -7px 0 rgba(0,0,0,0.05) inset, -7px -6px 0 rgba(0,0,0,0.05) inset,
                -7px -9px 0 rgba(0,0,0,0.05) inset, -8px -7px 0 rgba(0,0,0,0.05) inset,
                -8px -9px 0 rgba(0,0,0,0.05) inset, -9px -8px 0 rgba(0,0,0,0.05) inset,

                0 0 3px rgba(0,0,0,0.3), 2px 2px 3px rgba(0,0,0,0.3);

5、设置子div在父div中居中：设置子div的左右margin为与父div宽度之差的一半。

6、canvas球运动效果: 以固定较快的速度刷新画布。初始化时便开始。

7、body的子元素container，没有设置任何样式，为什么会使得页面出现左右滚动条？

8、

这个效果。箭头与文字是并列元素。箭头头部通过设置border及transform: rotate()生成，箭头尾部是为头部添加:after元素，并设置border-radius及rotate()属性。

9、z-index只在定位元素上有效。所以有时候需要设置position: relative;

10、帧动画：window.requestAnimationFrame