引言
今天在CodePen[codepen.io] 上面发现了一个使用css实现的一个手风琴效果, 感觉蛮有意思的,于是自己尝试了一下,发现不是特别难, 在编码前把思路整理好,再去实现,就会发现轻松许多...并且宽和高是浏览器视口的宽高,那么我们就可以编写我们的css代码.然后手风琴的盒子相对于浏览器视口是水平垂直居中的
子元素相对父元素水平垂直居中,可以使用flex布局....渐变颜色 , 推荐一个网站,里面有很多预设渐变颜色,而且很好看 ==> www.grabient.com/
浏览器视口的宽高 用 c3新增的宽高大小 vh 和 vw,
1vh 相当于 浏览器视口高度的...例如,如果有三个子项,它们的 flex-grow 分别为1、2和3,那么当父容器有额外空间时,第二个子项将尝试占据第一个子项两倍的空间,第三个子项将尝试占据第一个子项三倍的空间。...在该页面中,主要的作用就是,设置active类的元素, 即设置flex-grow 的元素的宽度将会自动占据父容器余下的空间.
前面的铺垫已经做好了.