纯生CSS---仿App广告卡片

今天正好做了一个卡片切换的东西，途中发现竟然又可以只用CSS解决，就顺势写了下来;

卡片.png

就是一排东西滑动的，用来放一些商品，让你买到手抽筋；

demo.gif

• 首先啊，我的思路：
  • 一个ul包裹一堆li，然后再让li去浮动
  • 想了一下，既然在移动端，不想去浮动了，就用inline-block吧
  • 限定容器的高度和宽度，然后overflow-x: scroll;让其滚动，
• 结果··当然遭报应了，后面的东西被挤下去了，在思考之后加了white-space:nowrap;就是不换行，当然可以在一排喽，港真，我一开始只会用将这些东西用于文本；例如这个动图里面，下面描述图片的文字;

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

• 之后，解决了一排图片不在一排滚动的问题，结果又发现怎么inline-block中间有这么多margin，我又没有设置，又发现inline-block中间原来会有间距，找到了许多方法，例如张鑫旭大神的这篇文章；但是我想，我现在用的angular，这些东西都是ng-repeat来弄得，虽然上线HTML代码会压缩，于是用了font-size:0来把这个间距干掉了；
• 最后，发现了一个问题，移动端的滑动是由弹性的那种，不是这么生硬的，找了一下，又给我找到了-webkit-overflow-scrolling,MDN是建议不要用，但是毕竟为了更加接近App那种弹性的感觉
  
  

  弹性.gif
  ；
• 最后，我又发现，每次滑动的时候，总会有一个滑动条，不滑动就消失了，这效果感觉不舒服，但是怎么把这个干掉呢？
  • 其实，前面已经做过了，over-flow，弄一个cover在其前面，让真正的滚动条高度变高，把滚动条压下去，然后做一个cover的父元素，在设计稿需要的高度弄一个overflow-y:hidden，相当于一个罩子，把后面的滚动条给过滤掉了；解决了~

最后的最后，发现了一个问题，当我手贱用把li都用float:left去弄得时候，发现竟然white-space:nowrap失效了，具体原理到底怎么回事，看看下次再次写写东西的时候喽

duang.gif

---

更新；其实我自己都弄错了，原来是overflow的时候，开启了BFC，把浮动给清除掉了，导致触碰到这个边界之后，浮动的Li全部没有了浮动