专栏首页Modeng的专栏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;
}

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

如果使用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内容生成技术以及应用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 聊一聊Vue组件模版,你知道它有几种定义方式吗?

    前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升。

    六小登登
  • Vue2.5笔记:Class与Style几种绑定用法

    在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了...

    六小登登
  • python中的数据类型和控制流

    上一篇文章中我们介绍了 python 语言的几个特点,并在最后留了一个问题,python 除了上下执行以外有没有其他的执行方式。

    六小登登
  • CSS 奇技淫巧:动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了?

    Sb_Coco
  • OC-类的结构-bits

    但仅仅源码层面还不足以知道类的结构。那么通过在类里添加属性以及clang 编译出源c代码

    Wilbur-L
  • 最短路径Dijkstra算法的简单实现

    最近刷题一连碰到好几道关于最短路径的问题自己一开始用深搜过了之后也就没怎么 管,但是之后的好几道用深搜都超时,之后查了资料才知道这种最短路径的问题一般使用广搜的...

    萌萌哒的瓤瓤
  • C# 如何在Excel 动态生成PivotTable

    Excel 中的透视表对于数据分析来说,非常的方便,而且很多业务人员对于Excel的操作也是非常熟悉的,因此用Excel作为分析数据的界面,不失为一种很好的选择...

    牛嗷嗷
  • Ant Design pro删除模块笔记(二)

    前面说到如何使用Ant Design Pro,并且添加自己需要的模块,但是如果添加了一个自己不太需要的模块,要怎么去删除?以下空白页面现在已经不需要了,删除步骤...

    王小婷
  • Spring 里那么多种 CORS 的配置方式,到底有什么区别

    作为一个后端开发,我们经常遇到的一个问题就是需要配置CORS,好让我们的前端能够访问到我们的 API,并且不让其他人访问。而在Spring中,我们见过很多种CO...

    字母哥博客
  • Leetcode 42 Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of ...

    triplebee

扫码关注云+社区

领取腾讯云代金券