css图片滑动切换图_CSS系列之教你几招小技巧，让开发更高效

俗话说「人靠衣装马靠鞍」，一个网页的漂亮与否CSS起到了很大的作用。它能够帮助我们进行美化。因此 CSS 在前端开发中的地位不用多说。

很多人认为 CSS 的入门门槛较低，所以认真对待和学习的人其实并不多，只要能把项目撸出来，管它呢。

殊不知 CSS 有很多的价值并没有被发挥出来。而且在 CSS 中有很多的技巧帮助我们更好的实现出想要的效果。

一般情况下我们能用 CSS 实现的，尽量不使用 JS。因为 CSS 的渲染效率要比利用 JS 操作DOM 要高效。

今天分享几个 CSS 小技巧，帮助你在项目开发的过程简单、高效的解决问题。

1. 不定高的滑动效果

看到上面的效果你会怎么实现？你的代码可能会是这样的。

 .box { width: 150px; height: 20px; transition: all 0.5s;}.box:hover { height: 250px;}

看似比较完美，但是有个缺点，就是如果我们的高度不固定，当文字的数量发生变化时。就会出现很多的剩余空间，显然不够友好。