CSS中的一些强大的属性和实用技巧

1、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">Headerdiv>
  <div>1div>
  <div>2div>
  <div>3div>
div>

2、: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 选中内容为空的容器，然后通过伪元素为空容器添加提示。是不是方便很多呢？

3、gap

大家日常开发中，都有用过 padding 和 margin 吧，margin 一般用做边距，让两个元素隔开一点距离，但是对于一些场景下，我们很难通过计算得到一个除的尽的值，比如 100px 我要让 3 个元素等分，且每个元素隔开 10px，这就很尴尬了。

没关系！我们可以用 gap 属性，gap 属性它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。

比如我们要让每个元素之间隔开 20px， 那么使用 gap 我们可以这样：

display: flex | grid；
gap: 20px;

4、background-clip: text

这个属性可能大家用的不多，有什么用呢？简单来说就是可以做一个带背景的文字效果：



相信上面三张图就可以很清楚地展示了这个属性的强大效果。

5、user-select

像图上这种行为，相信大家都不陌生，就是我们在网页上复制文本的时候会出现的画面。

有时候我们不想让用户发现我们是个网页，比如把网页封装成App的时候，那这个属性就派上用场了，它可以禁止用户选中页面上的文字。

6、:focus-within

:focus-within 表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。啥意思呢？简而言之，它可以让子元素去控制父元素。

// CSS
form {
    border: 1px solid;
    width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
form:focus-within {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
    background-color: beige;
}

// HTML
<form>
  <input type="text" id="ipt" placeholder="请输入..." />
form>

如果没搞明白，可以运行以上这段代码进行尝试。

7、使用 filter:grayscale(1) 使页面处于灰色模式

有时候我们需要改变整个页面的背景颜色，可以通过整个属性统一调整全局，让页面呈现某种色彩。

body{
  filter: grayscale(1);
}

8、mix-blend-mode:difference

mix-blend-mode:difference 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。

如果给你这张图，你会怎么去绘制？是不是很麻烦。

但是如果用 mix-blend-mode:difference 这个属性，就可以很容易的实现。

.mode {
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode:difference;
}
  .dark {
    position: relative;
    left: 6px;
    height: 24px;
    width: 24px;
    background-color: grey;
    border-radius: 50%;
}
.light {
    mix-blend-mode:difference;
    position: relative;
    left: -6px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 4px solid grey;
}