盘点一些惊艳一时的 CSS 属性
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
✨ 个人主页山山而川~xyj
⚶ 作者简介前端领域新星创作者专注于前端各领域技术共同学习共同进步一起加油
🎆 系列专栏 web 大前端
🚀 学习格言与其临渊羡鱼不如退而结网
目录
前言
随着前端的不断发展更多新的
CSS
属性不断加入提案本文列举 5 个不常用但很有用且你见过也可能没见过的CSS
属性带大家领略CSS
之美。
一、position: sticky
不知道大家平时业务开发中有没有碰到这样的需求标题在滚动的时候会一直贴着最顶上。这种场景实际上很多比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话是不是会用 js 结合 css 来实现呢以前确实是这样的直到后来 position
属性新增了一个属性值 sticky
前端程序员才迎来了小春天。
css 部分
.container {
background-color: oldlace;
height: 200px;
width: 140px;
overflow: auto;
}
.container div {
height: 20px;
background-color: aqua;
border: 1px solid;
}
.container .header {
position: sticky;
top: 0;
background-color: rgb(187, 153, 153);
}
html 部分
<div class="container">
<div class="header">Header</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
就这么简单对就这么简单但是使用的时候要注意兼容性。
二、:empty 选择器
平时开发的时候数据都是通过请求接口获取的也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示让用户知道当前不是出 bug
了而是确实没有数据。一般的做法是我们人为的判断当前数据返回列表的长度是否为 0如果为 0 则显示一个 “暂无数据” 给用户反之则隐藏该提示。写过 Vue
的小伙伴是不是经常这么做
<div>
<template v-if="datas.length">
<div v-for="data in datas"></div>
</template>
<template v-else>
<div>暂无数据</div>
</template>
</div>
但是有了 :empty
这个选择器后你大可以把这个活交给 CSS
来干:
.container {
height: 400px;
width: 600px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.container:empty::after {
content: "暂无数据";
}
通过 :empty
选中内容为空的容器然后通过伪元素为空容器添加提示。是不是非常方便
三、gap
小伙伴们日常开发中都有用过 padding
和 margin
吧margin
一般用做边距让两个元素隔开一点距离但是对于一些场景下我们很难通过计算得到一个除的尽的值比如 100px 我要让 3 个元素等分且每个元素隔开 10px这就很尴尬了。
没关系我们可以用 gap
属性gap
属性它适用于 Grid
布局、Flex
布局以及多列布局并不一定只是 Grid 布局中可以使用。
比如我们要让每个元素之间隔开 20px 那么使用 gap
我们可以这样
display: flex | grid
gap: 20px;
四、background-clip: text
这个属性可能用的不多有什么用呢简单来说就是可以做一个带背景的文字效果
大家平时 background-clip
是不是都用来做一些裁切效果你知道它还有个属性值是 text 吗background-clip: text
用来做带背景的文字效果相信大家平时浏览一些网站的时候都会看到类似的实现实际上通过 CSS
我们也能做到这种效果。
五、:invalid 伪类
:invalid
表示任意内容未通过验证的 input
或其他 form
元素。什么意思呢举个例子。
<form>
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required/>
</form>
我们的需求是让 input
当值有效时元素颜色为绿色无效时为红色。
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #C00000;
}
结论
本文就到此结束了希望大家共同努力早日拿下 CSS 。如果文中有不对的地方或是大家有不同的见解欢迎指出 。
如果大家觉得所有收获欢迎一键三连💕💕。