1. css基础：https://alex-ss.blog.csdn.net/article/details/83053901

2. css3新增属性值initial：可直接取消某个元素指定的样式值使其变为默认值，如color:initial。

3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量，且支持双向响应：属性：v-bind(js/ts变量)。

<template>
    <div class='ace_class'>文本颜色</div>
    <button @click='btnClick'>点击修改文本颜色</button>
</template>
<script setup lang='ts'>
import {ref} from 'vue';
const colorVal =ref('red');
const btnClick=e=>{
    colorVal.value='blue'
}
</script>

<style lang='scss' scoped>
.ace_class{
    color: v-bind(colorVal )
}
</style>

4. vue3中深度选择器:deep()的使用，在vue2中css使用>>>，以及预编译less/scss/sass中的/deep/，在vue3中都替换为:deep()：

.box{
    :deep(.ul){
        /*样式*/
    }
}

.box :deep(.ul){
        /*样式*/
}

5. 镜像界面，像沙特阿拉伯语：

.css{
    direction：rtl/ltr;
}

6. css磨砂效果：https://blog.csdn.net/qq_42231156/article/details/101203553

7. css文件在js/css/less/scss中的引入：

// 在js中
import 'xx/reset.css'
// 在css/less/scss中，结尾';'符号是必须的
@import 'xx/reset.css';
@import url('xx/reset.css');

8. css自定义滚动条：https://blog.csdn.net/qq_42231156/article/details/103070807

9. css单行/多行超出省略：https://blog.csdn.net/qq_42231156/article/details/84565677

10. vue项目响应式适配插件库：postcss-px2rem或者postcss-plugin-px2rem

11. css盒模型：https://blog.csdn.net/qq_42231156/article/details/103176762

12. css重置/通用样式库：https://blog.csdn.net/qq_42231156/article/details/124463067

13. css绘制三角形：https://blog.csdn.net/qq_42231156/article/details/124619100

原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

14. 媒体查询@media：

<meta name="viewport" content="width=device-width, initial-scale=1.0，maximum-scale=1,user-scalable=noe" />

<style>
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  /*css样式*/
}
</style>

/*
mediatype常用值：all(所有设备),print（打印机和打印预览）,screen(电脑，平板，智能手机等)
mediafeature常用值：max-width/min-width/max-height/min-height
*/

15. css九宫格：N宫格相同原理实现

<template>
    <ul class='ul'>
        <li v-for='item in 9' class='li'>{
   {item}}</li>
    </ul>
</template>
<style lang='scss' scoped>
.ul{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid;
  margin: 0;
  padding: 0;
  .li{
    display: inline-block;
    background:red;
    width: calc((100% - 20px*2)/3);
    height: 86px;
    text-align: center;
    &:not(:nth-child(3n)){
      margin-right: 20px;
    }
    &:not(:nth-child(n+6)){
      margin-bottom: 20px;
    }
  }
}
</style>

16. css的动画库：Animate.css

17. css文字环绕图片shape-outside：https://blog.csdn.net/qq_40047198/article/details/89087084

18. css的粘滞定位（滚动吸顶）：如通讯录列表滚动时，当前滚动位置字母实在吸顶：position：sticky。

<template>
   <div class="box">
     <ul class='ul'>
        <li v-for='(values,index) in list' class='li'>
          <h1 class="title">{
   {values[0]}}</h1>
          <ul>
            <li  v-for='(obj,i) in values[1]'>{
   {obj.name}}</li>
          </ul>
        </li>
    </ul>
   </div>
</template>
<script setup lang='ts'>
import {ref} from 'vue';
const list=ref(new Map())
list.value.set('A',Array.from({length:10},(v,k)=>{return {name:`A_${k}`}}))
list.value.set('B',Array.from({length:30},(v,k)=>{return {name:`B_${k}`}}))
</script>
<style lang='scss' scoped>
.box{
  width: 300px;
  height: 300px;
  border: 1px solid;
  .ul{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .title{
      position: sticky;
      background: red;
      top: 0;
    }
  }
}
</style>

19. css移动端web开发技巧：https://blog.csdn.net/qq_42231156/article/details/84565595

20. iconfont图标库：https://www.iconfont.cn/

21. css的cursor鼠标样式：http://css-cursor.techstream.org/

22. css中不常用，但特有用的一些属性：

• @font-face：引入字体文件。
• font-stretch：字体拉伸。
• font-kerning：字距。
• letter-spacing：字符间距。
• text-align-last：文本最后一行对齐方式。
• vertical-align：纵向对其方式，如文本和图片。
• word-spacing：单词间距。
• text-transform：文本字母大小写转换。
• text-decoration：文本划线。
• text-shadow：文本阴影。
• white-space：文本中空白处理。
• hyphens/word-break：换行和断字。
• writing-mode：文本横向纵向书写方式。
• ::first-letter：首字母伪类。
• ::first-line：首行伪类。
• shape-outside、polygon：文字环绕图片。
• position:sticky：滚动吸顶。
• background-clid：裁剪背景。
• background-attachment：背景粘附，即背景跟随滚动。
• direction:rtl/ltr：镜像界面，如沙特阿拉伯语，具有继承性。
• filter、mix-blend-mode、background-blend-mode、isolation、clip-path、mask-image、object-fit：css滤镜、裁剪、混合、遮罩、填充…
• display:grid、grid-template-rows、gird-template-columns、grid-row、grid-column：栅格布局。
• …

持续更新补充中…

• 2022web前端全栈完整整理——（一）浏览器篇