码云前端开发 2019-07-17

教你几招CSS小技巧让开发更高效

文章目录隐藏

不定高的滑动效果
不定高的全屏布局
动态切换图片
设置图标字符
结束语

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

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

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

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

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

不定高的滑动效果

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

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

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

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

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

<div class="box">鼠标悬浮进行滑动鼠标悬浮进行滑动鼠标悬...</div>
.box {
  padding: 20px;
  width: 150px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s;
}
.box:hover {
  max-height: 350px;
}

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

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

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

不定高的全屏布局

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

如果只是一层嵌套倒也好说，给父元素设置高度即可。但如果是多层级嵌套就会非常麻烦。需要设置很多高度。
比如我们会经常见到这样的代码，目的就是为了子元素可以设定 height: 100%。

html,body {
  height: 100%;
}

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

.box {
  position: relative;
  padding: 100px;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

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

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

动态切换图片

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

<img class="img-item" src="/head.png" />
.img-item {
  width: 200px;
}
.img-item:hover {
  content: url(/gonghao.jpg);
}

设置图标字符

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

<label>
*用户名
<input type="text" />
</label>

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

<form class="form"><label>用户名</label><input type="text" />
<label>手机号</label><input type="text" />
<label>邮箱</label><input type="text" /></form>
//css
.form label:before {
  content: "*";
  color: red;
}

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

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

如果你想了解更多有关 content 属性的内容可以查看我之前写的一篇《[CSS 系列]content 你不可忽略的属性》