开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情”

1. css基础

div~span ~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。

span+div +（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。

ant-table > ant-table-header > 大于号表示某个元素的第一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。

• 中括号 元素[class]

span[class='test']匹配所有带有class类名test的span标签。 span[class *='test']模糊匹配class包含了test字符串的span标签。 span[class]匹配所有带class属性的标签。

2. 性能优化 content-visibility

content-visibility 浏览器不可见区域不渲染，列表，一屏幕只能展示有限条数。不展示部分不渲染。 contain-intrinsic-size预设高度防止不渲染区域滑动导致滚动条抖动问题 提高渲染性能

content-visibility: auto;
contain-intrinsic-size: 200px;

3. 空格

 字符：不断行的空白格，该空格占据的宽度受字体影响(一个字符宽度)。  字符：相当全角状态键入半个“空格”键（半个汉字的宽度，一个字符宽度）。  字符：相当全角状态键入“空格”键（1个汉字的宽度，两个字符宽度）。

4. column布局

column-count: 4;
column-gap: 0;

    <style>
        .father {
            width: 500px;
            height: 400px;
            column-count: 5;
            column-gap: 0;
        }

        .son {
            height: 100px;
            background-color: black;
            border: 1px solid #f00;
            color: #fff;
        }
    </style>

    <div class="father">
        <div class="son">妇女节你看九峰可垃圾费发了句客服看辣椒粉考拉发了九分裤垃圾腐烂看风景非建安龙卷风克难奋进</div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情”