web前端开发个人技术博客
当前位置: HTML/CSS > 教你几招CSS小技巧 让开发更高效

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

2019-07-17 分类:HTML/CSS 作者:码云 阅读(365)

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

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

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

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

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

不定高的滑动效果

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

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

1
2
3
4
5
6
7
8
.box {
width: 150px;
height: 20px;
transition: all 0.5s;
}
.box:hover {
height: 250px;
}

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

不定高的滑动效果

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

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

1
2
3
4
5
6
7
8
9
10
11
<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%。

1
2
3
html,body {
height: 100%;
}

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

1
2
3
4
5
6
7
8
9
10
11
.box {
position: relative;
padding: 100px;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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

1
2
3
4
5
6
7
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

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

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

动态切换图片

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

动态切换图片

1
2
3
4
5
6
7
<img class="img-item" src="/head.png" />
.img-item {
width: 200px;
}
.img-item:hover {
content: url(/gonghao.jpg);
}

设置图标字符

设置图标字符

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

1
2
3
4
<label>
*用户名
<input type="text" />
</label>

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

1
2
3
4
5
6
7
<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小技巧,希望对需要的小伙伴们有些许帮助,而css的魅力远不止这些,还需要我们不断去挖掘它的更多潜力,后续还会继续给大家带来更多实用技巧,关注码云笔记即可。

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(5) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
5

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 教你几招CSS小技巧 让开发更高效

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论