CSS系列之教你几招小技巧，让开发更高效

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

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

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

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

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

1.不定高的滑动效果

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

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

如果使用JS去计算高度好像有点小题大作。那有没有比较好的实现方式呢？

其实我们可以利用 属性去实现不定高度下的滑动效果。

利用 的特性，设置一个永远比内容大的高度，这时元素的高度就是内容的高度，这样在配合使用 属性就可以实现过渡效果。

技巧就是，设置一个高度永远比内容要高。

不过这里有需要注意的地方是：不能把高度设置的太高，否则会出现「延迟现象」。应该找一个绝对安全且较小的值。小伙伴们不妨去尝试一下。

2.不定高的全屏布局

全屏布局，你第一想到的就是 height: 100%，可是这里面有一个坑，就是在高度设置 100% 的时候，父级元素的高度必须有一个固定的高度值，否则是无效的。

如果只是一层嵌套倒也好说，给父元素设置高度即可。但如果是多层级嵌套就会非常麻烦。需要设置很多高度。

比如我们会经常见到这样的代码，目的就是为了子元素可以设定 height: 100%。

今天介绍一种方法在不定父元素高度的情况下，可以让元素的 height: 100% 产生效果。那就是给元素加个「绝对定位」属性。这样子元素就会充满整个父容易。

当然除此之外，我们还可以用另外一种方式实现相同效果。

大家可以想象一下，在什么场景下使用此方法比较好。其实页面的 loading 非常适合这种方式实现。不仅仅是全局的 loading，更适合某个局部元素的 loading。比如表格刷新时，在表格中加入loading。

这是方式的好处在于，我们不用关心元素的高度，适用性非常强，小伙伴们不妨去尝试一下。

3.动态切换图片

通常要想实现二个图片的切换效果，都是两张图片的现实隐藏。今天看到这个之后你就可以使用 CSS 来实现这个效果了。简单方便。

4.设置图标字符

通常在网页中如果想表明一个字段是必填项时，我们都会添加一个小图标如上图红色星号。

除了这种方式之外，其实我们可以使用CSS来完成。

这样我们可以更少的使用HTML代码，当进行符号的修改时，我们也不必进行多次HTML的更改。

不过 的属性和用法远不止这些，我这里只是写了一个最为常见的简单用法，你可发挥更大的价值。一般固定化格式的都可以很好的利用这一点。而且内容也可以更加丰富多样。

今天就给大家分享这么多吧，后续还会继续给大家带来更多实用技巧，关注公众号即可。

如果觉得文章不错，对你有所启发，点赞是一种态度也是一种认可。