CSS日常杂记

学习的资源网站：awesome-css-learning  （Awesome JavaScript Learning）

https://mp.weixin.qq.com/s/NZ0tyaIiN4If-zIRq3Z23A

1.display none; visibility visible; opacity 0;

 

reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。
repaint:当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。
元素属性设置为display:none会引起回流和重绘，visibility:hidden会引起重绘。

推荐用 visibility:hidden 代替 display:none。

浏览器会对回流操作进行防抖优化，把回流操作放到回流队列里，等达到规定的临界值，然后挨个执行操作。但是在获取布局信息操作的时候，会强制将队列清空，也就是强制回流，比如访问或操作以下或方法时，offsetXXX，scrollXXX，clientXXX，getcomputedStyle。

https://zhuanlan.zhihu.com/p/342371522

如何避免回流？

 

提升合成层 will-change

will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。过度使用 will-change 会导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程。这会导致更严重的性能问题。

2.height 0消除浮动问题

http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

3.CSS BEM 书写规范

https://github.com/Tencent/tmt-workflow/wiki/%E2%92%9B-%5B%E8%A7%84%E8%8C%83%5D--CSS-BEM-%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83

4.ARGB

8位（#1e000000）ARGB 头两位是透明度，00是完全透明，ff是完全不透明，比较适中的透明度值是 1e，后6位是RGB值,比较适中的透明度值。

5.图片 to base64 /// 循序加载和渐进加载

// 方法一：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
   FileReader.readAsDataURL()
// 方法2：// https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
   HTMLCanvasElement.toDataURL()

JPEG文件交换格式（JPEG File Interchange Format，JFIF）：是一个图像文件格式的标准：https://zh.wikipedia.org/wiki/JPEG%E6%96%87%E4%BB%B6%E4%BA%A4%E6%8D%A2%E6%A0%BC%E5%BC%8F
循序加载：由上而下解码，baseline压缩规范；
渐进加载：解码过程中，从模糊渐渐清晰，progressive压缩规范。

jpeg解码器概述：https://github.com/MROS/jpeg_tutorial/blob/master/doc/%E8%B7%9F%E6%88%91%E5%AF%ABjpeg%E8%A7%A3%E7%A2%BC%E5%99%A8%EF%BC%88%E4%B8%80%EF%BC%89%E6%A6%82%E8%BF%B0.md

6.YcbCr色彩空间

7.切图注意事项

可以jpg就不要png，一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。
图片记得压缩：https://tinypng.com/
尽量页面与设计稿分毫不差，绝对不糊弄
图片格式与设计那点事儿：https://www.uisdc.com/picture-design-experience
svg压缩:https://www.cnblogs.com/dongxiaolei/p/7344662.html

8.css样式书写顺序（建议）

position relative
display inline-block
width 200px
height 100px
background xxxx
border 10px
font-size 16px
color #ffffff

有助于帮助浏览器渲染

传参就传对象，不要传单个的值

9.怎么实现卡片上的小三角形？

// i标签，并且标签样式生成小三角形
i > i {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px transparent solid;
    border-bottom: 10px transparent solid;
    border-right: 10px #fafafa solid;
    left: 2px;
bottom: -10px;

css写三角形的6中方式：https://mp.weixin.qq.com/s/nKFIYx7I6xFD1U7S0YR8cQ，使用border、使用 linear-gradient 绘制线性渐变三角形、使用 conic-gradient 绘制角向渐变三角形、transform: rotate 配合 overflow: hidden 绘制三角形、使用 clip-path 绘制三角形、利用字符绘制三角形。

10.skeleton骨架屏

11.CSS3声明局部变量：

&.dark
    --notice-bar-fill #222325
    --notice-bar-color brand-primary
    background-color #222325
    color brand-primary
    display flex
    z-index notice-bar-zindex
    font-size notice-bar-font-size
    min-height 36px
    background-color var(--notice-bar-fill)
    color var(--notice-bar-color)

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

12.stickyfilljs---> position sticky

13.smoothscroll

14.css-vars-ponyfill ：支持IE11 CSS变量

15.counter-reset属性

用于将css计数器指定为特定值

16.怎么写一个progress-bar

https://mp.weixin.qq.com/s/-30tR0oYMD0QXMsvz5dkTQ

.bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
}
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress) ‘%\2002‘;
    display: block;
    width: calc(300px * var(--percent) / 100);
    font-size: 12px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

17.css的expression

min()： https://developer.mozilla.org/zh-CN/docs/Web/CSS/min()

max()：https://developer.mozilla.org/zh-CN/docs/Web/CSS/max()

calc()：https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()

clamp：clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))

@document：https://developer.mozilla.org/en-US/docs/Web/CSS/@document

@media：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

 18.用svg、css、iconFont绘制loading图

主要是怎么用svg绘制loading，原理都是通过css设置属性和动画实现。

也可以看看elementui的progress组件的实现方式。

https://mp.weixin.qq.com/s/ZxEFOOoz7l3QlQcIaBopfw

19.卡片hover时候上移6px 动画效果

.hover-container:hover .box2 {
    transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    transition: all 0.3s ease;
}

卡片内容外面包裹着 hover-container ，是为了只让该卡片上移，不影响整个页面的高度。如果外面没有 hover-container，hover时候 这个页面会跳一下。

 

20.vue.config.js里面注入全局的样式常量

https://cli.vuejs.org/zh/guide/css.html

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'stylus',
            patterns: [
                path.resolve(
                    __dirname,
                    './src/mixins.styl',
                ),
                path.resolve(
                    __dirname,
                    './src/color-format.styl',
                ),
            ],
        },
    },
}

yarn add style-resources-loader stylus stylus-loader vue-cli-plugin-style-resources-loader -D

这样就可以将全局的一些公共css常量和样式注入全局。

 

21.  组合选择器复习

// 子元素选择器：选择作为div元素直接子元素的p元素
div>p
{
  background-color:yellow;
}

// 后代选择器：选择div元素下的所有后代p元素
div p
{
  background-color:yellow;
}

// 相邻兄弟选择器:选择紧接在div元素后的第一个元素，且二者有相同父元素
div+p
{
  background-color:yellow;
}

// 后续兄弟选择器: <div> 元素之后的所有相邻兄弟元素 <p>
div~p
{
  background-color:yellow;
}

 

22.css变量，一键换暗色主题

https://mp.weixin.qq.com/s/pupBwNqKEI0WesFrDyPhEw

文档里面提供了如何将颜色关键字、16进制颜色、rgb等函数式颜色变量，自动替换为站点内自定义的颜色数据。

主要是通过postCSS和styleLint来解析css，分析替换其中的颜色常量。

感觉这个思路可以很方便的完成全局css颜色的主题管理，值得借鉴。

 

23.vue的css变量

文章里面讲述了在vue3和vue3种css变量的使用方式和原理：https://mp.weixin.qq.com/s/n66y5extz3jl5o5sPtDQQQ

我理解css变量，更好的使用场景是做主题管理，不同模式下颜色样式的控制，但是现在很多网站，建站时候并不会考虑css主题管理。比如暗黑模式、普通模式、大屏模式、影院模式……元素的内容不变，只是布局变了，这种场景，很适合通过变量实现主题样式的控制。但的确相对来说，短期的开发成本较高，但是长期来说，还是很有用的。

特别是多人开发的场景，如果没有统一的规范，全局css更加随意，造成了很多冗余样式代码的存在。

 

24.flex练习小游戏

https://flexboxfroggy.com/

 

25. GPU和CSS硬件加速科普文

https://zhuanlan.zhihu.com/p/404656386?utm_source=wechat_session&utm_medium=social&utm_oi=27091277971456

重点：

 26.盒子

建站时候，初始化，简化所有元素设置为

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

*, ::after, ::before {
    box-sizing: border-box;

 

27. :root

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root

:root {
    --ck-insert-table-dropdown-padding: 10px;
    --ck-insert-table-dropdown-box-height: 11px;
    --ck-insert-table-dropdown-box-width: 12px;
    --ck-insert-table-dropdown-box-margin: 1px;
}

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

一般用来声明一些全局css变量。

 

28.遇到了一个window和mac上，css编译结果不一致的情况：

  

这是同一个项目，同一段脚本，在不同系统浏览器上面的结果。mac-chrome是符合期望的，window不符合期望。vue脚本如下：

<!-- index.vue -->
<template>
    <page-footer class="search-footer"></page-footer>
</template>
<style scoped lang="stylus">
.search-footer
    position relative // 加 !important ，windows 表现才能符合期望
</style>

<!-- page-footer.vue -->
<style lang="stylus" scoped>
.page-footer
    width 100%
    position fixed
    color $--text-color-footer
    background-color $--color-white
    margin 0 auto
    text-align center
    font-size 14px
    box-sizing border-box
    padding-top 86px
    padding-bottom 48px
    bottom 0px
    font-family PingFangSC, PingFangSC-Regular
@media screen and (max-height: 1282px)
    .page-footer
        position relative
</style>

如果class生效优先级和声明顺序有关，那mac-chrome表现才是符合期望的。不明白为什么windows的css编译成了那个样子。

 

29.page-footer自适应布局解法

<div class="flex flex-col min-h-100vh">
    <div class="banner box-border h-400px overflow-auto"></div>
    <section class="flex-1"></section>
    <page-footer class="h-280px"></page-footer>
</div>

或者直接设置flex-1的那个元素，min-height = calc(100vh - headerHeight - footerHeight) 

 

30.font-weight 对应表

 

31.vertical-align和line-height