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;
}
复制代码

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

若是使用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 属性就能够实现过渡效果。

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

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

2. 不定高的全屏布局

全屏布局，你第一想到的就是 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。

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

3. 动态切换图片

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

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

4. 设置图标字符

一般在网页中若是想代表一个字段是必填项时，咱们都会添加一个小图标如上图红色星号。

<label>
    <span>*</span>用户名
    <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属性

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

若是以为文章不错，对你有所启发，点赞是一种态度也是一种承认。

更多优质文章、更多故事关注微信公众号：六小登登，拉你进入优质交流群。来这里一块儿交流，一块儿进步。

参考： CSS content内容生成技术以及应用

代码地址