y

yyg

V1

2023/01/15阅读:35主题:全栈蓝

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 {           
  width100%;           
   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{
        height100vh; 
        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,51.5) translate(0190.5)
对应: transform: matrix(1.5001.50190.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 {
  width100%;
  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属性,它负责将图像定位在其容器中 image.png

滚动

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>

分类:

前端

标签:

前端

作者介绍

y
yyg
V1