关于前端:css精进功法上部

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) // 计算 sinθ
  const 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 多平台公布