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');
    }