在工作中遇到的一些CSS问题

一些知识点

1. CSS 中的::before,::after 等伪元素，如果要设置hover 之后的样式，可以通过下面的方式来处理。不可以直接在伪元素上加:hover 的样式。

div:hover::before {
    color: xx;
    background: xx;
}

2. CSS 中global与CSS module

import s from './components/theme.module.css';

css module写法的例子如下：

       <Tooltip overlayClassName={s.customTooltip} title='测试tooltip测试tooltip，测试tooltip测试tooltip，测试tooltip测试tooltip，测试tooltip测试tooltip'>
            <p>测试tooltip测试tooltip，测试tooltip测试tooltip，测试tooltip测试tooltip，测试tooltip测试tooltip</p>
        </Tooltip>

最终生成的样式如下：

可以看到使用CSS module的方式生成的样式，会多一个后缀

如果要覆盖一些组件库的样式，通过css module方式，是没有办法覆盖的，因为组件库的样式，一般是没有后缀的。因此，可以使用:global方式来覆盖。

如果不使用CSS module的方式，也可以直接覆盖，这种直接覆盖的方式，会存在一定程度的样式污染的问题，这个样式，不会卸载，还会在新的路由组件页面生效。

/** 关于什么时候，需要使用global，什么时候，不需要:global 的问题 */
.customTooltip {
  .ant-tooltip-inner {
    background-color: #fff !important;
    color: #333 !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
  }
  .ant-tooltip-arrow::before {
    background: #fff !important;
    background-color: #fff !important;
    color: transparent;
  }
  .ant-tooltip-arrow-content::before {
    background: #fff !important;
    background-color: #fff !important;
    color: transparent;
  }
}

2. CSS中要查看元素的一些样式，比如获得焦点，失去焦点等的样式，可以使用chrome 模拟已聚焦的网页这块的功能。
3. flex 与grid 布局，以及浮动布局等布局之间的适应场景问题

一般flex 布局，不是太适合换行的场景，flex 布局的换行依赖于flex-wrap 属性，而flex-wrap 属性要起作用，依赖于flex 容器是否有一个固定的宽度。如果不是根据固定宽度来换行的，就不适合使用flex布局。

grid 布局比较适合于比较复杂的布局的情况。比如分了好多不同的格子的情况。

float 布局，一般用于浮动的情况，用于将块状元素浮动放在一行展示，也可以使用overflow:hidden; 属性等来清除浮动。

与滚动条有关的一些属性

滚动条新语法

• scroll-color: red blue;

scroll-color 属性是用来定义滚动条颜色，它可以同时接受两个颜色值，第一个颜色值是用来定义滚动滑块的颜色，第二个颜色值是用来定义滚动轨道的颜色；

• scroll-width: thin | auto | none

scroll-with 用来定义滚动条的宽度，thin 会比正常宽度瘦一点，auto就是默认的正常的,none 就不显示滚动条，但依然可以滚动。

滚动条旧语法

--webkit-scrollbar-thumb

定义滚动条滑块的样式

--webkit-scrollbar

定义整个滚动条的样式

--webkit-scrollbar-track

定义滚动条轨道的样式。

总结

虽然 CSS 的 scrollbar-color 和 scrollbar-width 可以用来定制滚动条 UI ，但它们的局限性太大，无法达到旧语法 ::-webkit-scrollbar 、::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 定制的滚动条 UI 。