place-content: center; 程度垂直居中

可用于

  • display:flex;//相当于justify-content:center;和align-items:center;的简写
  • display:grid;

禁止用户选中文字

user-select:none;

flex布局换行之后，上面一行的布局会异样

.homeItemBox{  display: flex;  flex-wrap: wrap;  justify-content: flex-start; }.homeItem{    display: flex;    width: calc((100% - 20rpx) / 4);  flex-direction: column;  align-items: center;   flex-shrink: 0;    margin-top:30rpx; }.homeItem:nth-of-type(4n+0){margin-right: 0;}  //每一行的第四个margin right是0

nth-of-type(4n+0)

  • 4n+0 就是每隔四个

  • odd even关键词示意奇偶数这个是算术表达式

    p:nth-of-type(3n+0)应用公式 (an + b)。
    *形容：示意周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，
    咱们指定了下标是 3 的倍数的所有 p 元素的背景色*

flex-shrink: 0;

假使给父元素设置了flex布局后，若要其子元素的width有成果，必须给子元素设置flex-shrink为0
来固定元素不被挤压

filter

*filter:brightness 亮度/曝光度
filter:brightness(0.2)
filter: opacity( %) ---- 透明度
filter: drop-shadow(offset-x offset-y blur color) ---- 暗影
filter:drop-shadow(10px 15px 20px #000)
filter: grayscale( %) ---- 灰度图像
filter: sepia( %) ---- 深褐色
filter: hue-rotate( deg ) ---- 色相旋转
filter: invert( %) ---- 反转图像 应用invert滤镜能够把对象的可视化属性全副翻转，包含色调、饱和度和亮度值
filter: saturate( %) ---- 饱和度
filter: contrast( %) ---- 对比度 值0％代表全灰色图像，而100％代表原始图像
filter: blur( px) ---- 高斯含糊*

全站置灰

html {    filter: grayscale(.95); -webkit-filter: grayscale(.95);}

filter VS backdrop-filter

  • filter：该属性将含糊或色彩偏移等图形成果利用于元素。
  • backdrop-filter：该属性能够让你为一个元素前面区域增加图形成果（如含糊或色彩偏移）。它实用于元素背地的所有元素，为了看到成果，必须使元素或其背景至多局部通明。
  • 两者之间的差别，filter 是作用于元素自身，而 backdrop-filter 是作用于元素背地的区域所笼罩的所有元素。而它们所反对的滤镜品种是截然不同的。
  • backdrop-filter 最为常见的应用形式是用其实现毛玻璃成果。
    filter 和 backdrop-filter 应用上最显著的差别在于：
    *filter 作用于以后元素，并且它的后辈元素也会继承这个属性
    backdrop-filter 作用于元素背地的所有元素
    认真辨别了解，一个是以后元素和它的后辈元素，一个是元素背地的所有元素。*

inset

*inset 属性只作用于定位元素
inset 属性用作定位元素的 top、right、bottom、left 这些属性的简写。相似于 margin 和 padding 属性，按照“上右下左”的程序。*

置灰网站的首屏

兼容更好的混合模式

 html{             position:relative;             width: 100%;             height: 100%;             overflow: scroll;             background-color: #fff;         }         html::before{              content:"";               position:absolute;           inset:0;            background: rgba(0,0,0,1);                      /* mix-blend-mode: color; 色彩*/                                  /* mix-blend-mode: hue; 色相*/                mix-blend-mode: saturation;  //饱和度            以上三种模式都可     pointer-events: none;             /* 点击穿透 */                 z-index:10;            }            .box{                 background: url('./one.png'),url('./two.png');                   background-size: cover;                    width: 400px;                   height: 400px;                    background-blend-mode:lighten;           }

backdrop-filter 实现一种遮罩滤镜成果

 html {             width: 100%;              height: 100%;               position: relative;                overflow: scroll;             }             html::before {                    content: '';                     position: absolute;                      width: 100%;                       height: 100%;                        z-index: 10;                          inset: 0;                           backdrop-filter: grayscale(0.9);                           pointer-events: none;                        }

table应用

子元素均分父元素的长度

*display:table-row; //padding和margin会生效
父元素设置display: table时; 留神padding会生效
子元素设置 display: table-cell; //margin会生效*

h3{            display: table-cell;        }nav{            display: table;            width:100%;            position: sticky;            top:0;            background-color: red;        } <nav>        <h3>导航1</h3>        <h3>导航2</h3>        <h3>导航3</h3>    </nav>

利用table居中

.parentBox{  display: table;  width: 100vw;  height: 600rpx;   border:1px solid #AAA; } .sonItem{   display: table-cell;   vertical-align: middle;   text-align: center;  }

吸顶

留神如果父元素设置了overflow-hidden 则吸顶会生效

  width:100%;            position: sticky;               top:0;

滚动视差 background-attachment

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度挪动，造成平面的静止成果，带来十分杰出的视觉体验

     <div class="gImg gImg1"></div>  <div class="gImg gImg2"></div>  <div class="gImg gImg3"></div>.gImg{        height: 100vh;         width: 100%;        background-attachment:fixed;        background-size: cover;        background-position: center center;    }    .gImg1{        background-image: url('./one.png');    }    .gImg2{        background-image: url('./two.png');    }       .gImg3{        background-image: url('./three.png');    }

成果大略就是

CSS3 transform 中的 matrix


2D 的转换是由一个 3*3 的矩阵示意的，前两行代表转换的值，别离是 a b c d e f，要留神是竖着排的，第一行代表 x 轴产生的变动，第二行代表 y 轴产生的变动，第三行代表 z 轴产生的变动，因为这里是 2D 不波及 z 轴，所以这里是 0 0 1。

  • 缩放 scale对应的是矩阵中的 a 和 d，x 轴的缩放比例对应 a，y 轴的缩放比例对应 d，
  • 平移 translate对应的是矩阵中的 e 和 f，平移的 x 和 y 别离对应 e 和 f。
  • 偏移 skew对应矩阵中的 c 和 b x 对应 c，y 对应 b， 这个对应并不是相等，须要对 skew 的 x 值 和 y 值进行 tan 运算。transform: matrix(a, tan(30deg), tan(20deg), d, e, f)

  • 旋转 rotate影响的是a/b/c/d四个值 a=cos b=sin c=-sin d=cos
    将 30° 转换为弧度，传递给三角函数计算

    // 弧度和角度的转换公式：弧度=/180×角度 const radian = Math.PI / 180 * 30 // 算出弧度const sin = Math.sin(radian) // 计算 sinconst cos = Math.cos(radian) // 计算 cos
所以这个: transform: scale(1,5, 1.5) translate(0, 190.5)对应: transform: matrix(1.5, 0, 0, 1.5, 0, 190.5);

如果旋转+缩放+偏移+位移一起的话
依照transform外面rotate/scale/skew/translate所写的程序相乘。

具体

利用js管制css之setProperty

通过js批改body的css变量

body{  width:100vw;  height:100vh;  overflow: hidden;  background-color: #111;  perspective: 1000px;  --c-eyeSocket:rgb(41,104,217);  --c-eyeSocket-outer:#02ffff;  --c-eyeSocket-outer-shadow:transparent;  --c-eyeSocket-inner:rgb(35,22,140);}// 通过js批改body的css变量     document.body.style.setProperty('--c-eyeSocket','rgba(255,187,255)');//css应用css变量.eyeSocket::before {  width: calc(100% + 20px);  height: calc(100% + 20px);  border: 6px solid var(--c-eyeSocket);}

js管制设置以后的元素下面的类名来管制动画

this.$refs.bigEye.className = 'eyeSocket eyeSocketSleeping'.eyeSocket {  position: absolute;  left: calc(50%-75px);  top: calc(50%-75px);  width: 150px;  aspect-ratio: 1;  border-radius: 50%;  z-index: 1;  border: 4px solid var(--c-eyeSocket);  box-shadow: 0px 0px 50px var(--c-eyeSocket-outer-shadow);  /* 当怄气时增加红色外发光，常态则放弃通明 */  transition: border 0.5s ease-in-out,box-shadow 0.5s ease-in-out;  /* 增加过渡成果 */}.eyeSocket::before,.eyeSocket::after {  content: '';  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  border-radius: 50%;  box-sizing: border-box;  transition: all 0.5s ease-in-out;}.eyeSocket::before {  width: calc(100% + 20px);  height: calc(100% + 20px);  border: 6px solid var(--c-eyeSocket-outer);}.eyeSocket::after {  width: 100%;  height: 100%;  border: 4px solid var(--c-eyeSocket-inner);  box-shadow: inset 0px 0px 30px var(--c-eyeSocket-inner);}.eyeSocketSleeping{  animation:sleeping 6s infinite;}@keyframes sleeping {  0%{    transform: scale(1);  }  50%{    transform: scale(1.2);  }   100%{    transform: scale(1);  }}

any-hover any-pointer

  • any-hover通过css判断设施是否反对鼠标通过行为
  • 而pointer则是与点击事件相干
    any-hover
  • none: 没有什么输出安装能够实现hover悬停，即没有鼠标输出设施

  • hover: 一个或多个输出安装能够触发元素的hover悬停交互，即反对鼠标设施

    button:active { background-color: #f0f0f0;}/* 兼容PC端： */@media (any-hover: hover) { button:hover { background-color: #f5f5f5;}}

pointer语法
同样也是反对上面3个关键字值：

  • none主输出安装点击不可用。
  • coarse主输出安装点击不准确。
  • fine主输出安装点击很OK。

例如点击不准确的时候让复选框尺寸变大：

@media (pointer: coarse) {  input[type="checkbox"] {    width: 30px;    height: 30px;  }}

通过getComputedStyle 款式做响应式

判断是出于挪动端还是pc端
@media (any-hover: none) {    body::before {        content: 'hoverNone';        display: none;    }}var strContent = getComputedStyle(document.body, '::before').content;
  • strContent后果是'none'则示意反对 hover，是 PC 端，
  • strContent后果是'"hoverNone"'则示意不反对 hover 通过，须要换成 click 事件，是 Mobile 端
JS 判断以后是处于光明模式，还是浅色主题

prefers-color-scheme 媒体个性。它可能帮忙检测设施的深色模式开启状况

:root {    --mode: 'unknown';}@media (prefers-color-scheme: dark) {    /* 光明模式 */    :root {         --mode: 'dark';         --colorLink: #bfdbff;         --colorMark: #cc0000;         --colorText: #ffffff;         --colorLight: #777777;    }}@media (prefers-color-scheme: light) {    /* 浅色主题 */    :root {         --mode: 'light';         --colorLink: #34538b;         --colorMark: #cc0000;         --colorText: #000000;         --colorLight: #cccccc;    }}var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();// mode后果是'"dark"'则示意黑夜主题，深色模式，光明格调，护眼模式。

object-fit object-position 用于图片的显示方式

object-fit 有五个值

  1. fill 替换内容填充拉伸填满整个盒子，不保障原有的比例
  2. contain 替换内容放弃原有尺寸比例，保障内容肯定在容器内，然而容器内可能留下空白
  3. cover 笼罩放弃原有比例，保障替换内容尺寸肯定大于容器的尺寸，宽度和高度至多有一个和容器统一
  4. none 放弃原有尺寸比例
  5. scale-down: 出现尺寸较小

object-fit，咱们还有object-position属性，它负责将图像定位在其容器中
。

滚动

scroll-padding scroll-margin 在主动滚动定位时预留指定的间距
  • scroll-padding作用对象是滚动元素

  • scroll-margin作用对象是指标元素

       h2{     scroll-margin: 6rem;   }   html{     scroll-padding: 6rem   }
    scrollIntoView 将指定元素滚动到眼帘范畴内
    el.scrollIntoView(); // 等同于el.scrollIntoView(true)el.scrollIntoView(false);
  • 如果为true，示意元素的顶部与以后区域的可见局部的顶部对齐（前提是以后区域可滚动）；相当于 {behavior: 'auto', block: 'start', inline: 'nearest'}
  • 如果为false，示意元素的底部与以后区域的可见局部的尾部对齐（前提是以后区域可滚动）。{behavior: 'auto', block: 'end', inline: 'nearest'}
  • 当未传入参数时，默认值为：{behavior: 'auto', block: 'start', inline: 'nearest'}

scrollIntoViewOptions，一个蕴含下列属性的对象。

  • behavior定义过渡动画，默认值为auto。
    auto，示意没有平滑的滚动动画成果。
    smooth，示意有平滑的滚动动画成果。
  • block定义垂直方向的对齐，默认值为start。
    start，示意顶端对齐。
    center，示意两头对齐
    end，示意底端对齐。
    nearest：
    如果元素齐全在视口内，则垂直方向不产生滚动。
    如果元素未能齐全在视口内，则依据最短滚动间隔准则，垂直方向滚动父级容器，使元素齐全在视口内。
  • inline定义程度方向的对齐，默认值为nearest。
    start，示意左端对齐。
    center，示意两头对齐。
    end，示意右端对齐。
    nearest：
    如果元素齐全在视口内，则程度方向不产生滚动。
    如果元素未能齐全在视口内，则依据最短滚动间隔准则，程度方向滚动父级容器，使元素齐全在视口内
//这个title-part元素将以平滑的滚动形式滚动到与视口底部齐平中央（有兼容性问题）document.querySelector("#title-part").scrollIntoView({    block: 'end',    behavior: 'smooth' })//这个titleMU-part元素将木讷的霎时滚动到与视口底部齐平中央（无滚动动画成果）document.querySelector("#titleMU-part").scrollIntoView(false)

默认也是紧贴滚动元素的，如果设置了scroll-padding 或者scroll-margin,
就能够在滚动定位时预留肯定间距

focus 聚焦时主动将元素滚动到眼帘范畴内

如果有fixed定位元素遮住了，可应用scroll-padding,scroll-margin
:target CSS 伪类 代表一个惟一的页面元素 (指标元素)，其id 与以后 URL 片段匹配。
文言就是:target可用于以后流动target元素的款式,通过a标签绑定id元素,实现点击a标签批改a标签链接元素的属性

    :target{      border: 1px solid #ccc;    }

可用于tab栏

    .box{      display:flex;    }    div{      width:200px;      height:200px;      background-color:skyblue;      display:block;      margin-left:20px;      transtion:flex 1s;    }    div:target{      flex:1;      background-color:red;    }    <div>       <p>       <a href="#a">1</a>       <a href="#b">2</a>       <a href="#c">3</a>       </p>       <div class="box">        <div id="a"></div>        <div id="b"></div>        <div id="c"></div>       </div>    </div>
overscroll-behavior:contain

阻止滚动链接，滚动不会流传给先人元素

  • overscroll-behavior是overscroll-behavior-x和overscroll-behavior-y属性的合并写法，
  • 有三个值： auto,contain,none，inherit
    auto:默认会流传给先人元素
    contain:阻止滚动流传给先人元素
    none:none与contain的成果一样
    inherit:从父元素继承滚动行为
  .son{    height:300px;    width:300px;    overflow-x:scroll,    overscroll-behavior-x:contain;  }
scroll snap
  • scroll snap目前仅反对 scroll-snap-align和scroll-snap-type
    scroll-snap-align用于子元素，定义滚进行后，子元素的对齐形式

  • 有三个值：

    1. start: 当滚动进行时，浏览器会滚动到子元素在容器的起始地位
    2. end: 当滚动进行时，浏览器会滚动到子元素在容器的完结地位
    3. enter: 当滚动进行时，浏览器会滚动到子元素在容器的中点地位

  • scroll-snap-type:用于容器定义滚动的方向和类型有两个值：

    1. mandatory:当用户进行滚动的时候，会主动的抉择元素的一个点

    2. proximity:当用户滚动到靠近足够的值的时候,才会抉择元素的一个点进行滚动
      比方

        scroll-snap-align:center; scroll-snap-type:x proximity;这个大略是滚动超过两头点150px的地位产生滚动

残缺x轴的案例

<div class="container">    <div ><img src="1.jpeg" /></div>    <div ><img src="2.jpeg" /></div>    <div ><img src="3.jpeg" /></div>    <div ><img src="4.jpeg" /></div>    <div ><img src="5.jpeg" /></div>    <div ><img src="2.jpeg" /></div>    <div ><img src="3.jpeg" /></div>    <div ><img src="4.jpeg" /></div></div>  .container{    display:flex;    flex-drection:row;    height:200px;    padding:1rem;    width:200px;    overflow-x:auto;    overscroll-behavior-x:contain;    scroll-snap-type:x mandatory;;  }  div{    margin:10px;    scroll-snap-align:center;  }  img{    width:180px;    max-width:none;    object-fit:contain;    border-radius:1rem;  }

所以scroll-snap-type这个属性能够让滚动时主动捕获临界点。失常状况下，滚动临界点是紧贴滚动容器的

  scroll-snap-type:y proximity;  scroll-snap-slign:start;  scroll-margin:  0是起始地位  负数是记录起始的地位   正数能够看到下一个盒子的内容
晋升页面滚动性能

##### pc端
防止在页面滚动的时候频繁触发包含hover在内的，任何鼠标事件，从而晋升页面滚动时的性能

body{       point-events:none;     }

应用滚动监听可灵便管制

let timer = null     window.addEventListener('scroll',function(){       document.body.style.pointerEvents = 'none'       if(timer){this.clearTimeout(timer)}       timer = this.setTimeout(()=>{         document.body.style.pointerEvents = 'auto'       },100)     })

##### 挪动端
touch-action能够禁用浏览器在挪动端解决手势的事件，进而进步页面滚动的性能，还可解决挪动端点击提早
none:阻止所有原生的touch事件，然而咱们的轮动也属于touch事件，
所以要应用manipulation,这个值只容许滚动和继续缩放操作，也就是相当于禁用了其余手势

 html{       touch-action:manipulation;     }

也可应用js管制

 //  在须要时被动触发对全局的所有手势禁用  document.documentElement.style.touchAction = "none" // 某一个区域的手势禁用 document.getElementById('XX').style.touchAction="none" // 不须要时还原  比方在抬手事件中解决 document.addEventListener('touchend',function(){   document.documentElement.style.touchAction = "manipulation" })

preventDefault阻止默认行为 个别设置passive为 false 申明不是被动的，
浏览器执行完回调函数才晓得有没有调用preventDefault,再去执行默认行为，这样会造成滚动不晦涩

 window.addEventListener('touchmove',e=>e.preventDefault(),{      passive:false //设置passive为 false，申明不是被动的    })

所以touchAction先申明可用触摸事件再配合preventDefault阻止默认行为，且不会影响触摸事件

    document.documentElement.style.touchAction = "manipulation"    window.addEventListener('touchmove',e=>e.preventDefault(),)    //将 manipulation 值改为 none，就能够齐全阻止滑动默认事件

css管制节流

  <div class="body">    <button class="throttle" @click="clickFunc">节流提交</button>  </div>.body{  display: grid;  place-content: center;  height: 100vh;  margin: 0;//gap属性实际上是column-gap属性和row-gap属性的缩写 设置网格行列间距  gap: 15px;  background: #f1f1f1;  user-select: none; //鼠标不可抉择}button {  user-select: none;}.throttle {  animation: throttle 2s step-end forwards;}//:active 伪类匹配被用户激活的元素.throttle:active {  animation: none;}@keyframes throttle {  from {    pointer-events: none;    opacity: .5;  }  to {    pointer-events: all;    opacity: 1;  }}

或者通过:active去触发transiton的变动 而后通过transition回调去动静设置设置按钮的禁用状态

<div class="body">    <button class="throttle" @click="clickFunc">节流提交</button>  </div>mounted () {        document.addEventListener('transitionstart', function (ev) {      ev.target.disabled = true    })    document.addEventListener('transitionend', function (ev) {      ev.target.disabled = false    })  }<style scoped>button {  opacity: 0.99;  transition: opacity 2s;}button:not(:disabled):active {  opacity: 1;  transition:0s;}</style>

本文由mdnice多平台公布