02.CSS

lishihuan大约 20 分钟

02.CSS

https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.htmlopen in new window

常用属性

1. 文本

1.1 letter-spacing 属性增加或减少字符间的空白（字符间距）。

letter-spacing

1.2 换行

white-space: pre-wrap;/*换行*/

pre-line: 合并空格，保留换行符，允许自动换行

normal: 合并空格，换行符转化为一个空格，允许自动换行

nowrap: 合并空格，换行符转化为一个空格，不允许自动换行

pre: 保留空格，保留换行符，不允许自动换行

pre-wrap: 保留空格，保留换行符，允许自动换行

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 `<pre>` 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 `<br>` 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

三角的实现

<a href="#" class="more">获取更多福利</a>

.more {
    position: absolute;
    right: 5px;
    top: 0px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}

.more::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

CSS绘制各种各样的形状图形

https://blog.51cto.com/u_15142266/2787548?articleABtest=0open in new window

文字效果

https://blog.csdn.net/yanyiping992/article/details/80129514open in new window

文字阴影：CSS3属性 text-shadow

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值open in new window。

h1{
    text-shadow: 2px 2px #ff0000;
}

阴影

https://tool.ip138.com/cssboxshadow/open in new window

CSS3 box-shadow 属性

值	描述
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影(开始时)改变阴影内侧阴影

字体阴影

background-image: linear-gradient(180deg, #EFD9B4 0%, #F6C58A 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(0, 0, 0, 0);

文字超长

/*超长*/
.long_omit{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/*超长省略，针对 long_omit 无法使用的场景*/
.long_omit2{display:block;text-overflow: ellipsis;white-space: nowrap;}
/*文字只排列2行*/
.outer {
  overflow: hidden;
  text-overflow: ellipsis;
  /*设置成弹性盒子 */
  display: -webkit-box;
  /*显示的个数 */
  -webkit-line-clamp: 3;
  /* 属性规定框的子元素应该被水平或垂直排列。 */
  -webkit-box-orient: vertical;
}

媒体查询

@media screen and (min-device-width: 800px) and (max-device-width: 1440px){

}
@media screen and (min-device-width: 1440px) and (max-device-width: 1680px){

}
@media (min-device-width: 1920px){

}

渐变色

https://blog.csdn.net/qq_18661257/article/details/50640633open in new window

linear-gradient

从上到下

从左到右

现径向渐变

解释：

radial-gradient(ellipse, ...)：使用椭圆形的径向渐变，确保渐变是从中心向四个边扩展的。
rgb(0 102 255 / 14%) 25%：在中心区域，颜色保持 rgb(0, 102, 255)，透明度为 14%，并且渐变从中心开始，至 25% 处。
rgb(0 102 255 / 0%) 80%：渐变逐渐过渡到透明，直至 80% 处，减少渐变明显的界限。
没有设定 100% 位置：这样可以避免渐变过于强烈地在元素边缘形成明显的变化。

文字渐变色

.text{
    font-size: 3em;
    font-weight: 900;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    background-image: linear-gradient(0deg, #fefafa, #05acf4 40%, #fefafa);
    background-image: -webkit-linear-gradient(top,#fefafa 10%,#05acf4 80%);
}

文字渐变色，从上往下

案例：

背景设置渐变

background: linear-gradient(#C9D7FF, #FFFFFF) no-repeat;
background-size: 100% 30%;/* 设置了显示高度 */

CSS 选择器

属性选择器

选择器	描述
[attr]	用于选取带有指定属性的元素
[attr=value]	用于选取带有指定属性和值的元素
[attr~=value]	用于选取属性值中包含指定词汇的元素
[attr=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attr^=value]	匹配属性值以指定值开头的每个元素。
[attr$=value]	匹配属性值以指定值结尾的每个元素。
[attr*=value]	匹配属性值中包含指定值的每个元素。

找出class名称为 ‘local-icon’ 开头的 li

li [class^="local-icon"] {

}

4.选取索引号从0开始为偶数的div元素:even

$("div:even").attr();

5.选取索引号从0开始为奇数的div元素:odd

$("div:odd").attr();

6.选取索引号从0开始等于3的div元素:eq

$("div:eq(2)").attr();

7.选取索引号从0开始大于3的div元素:gt

$("div:gt(3)").attr();

8.选取索引号从0开始小于3的div元素:lt

$("div:lt(3)").attr();

9.选取索引号从0开始小于等于3的div元素:

$("div:lt(3), div:eq(3)").attr();

nth-child 属性

参考open in new window

参考2open in new window

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。（注意，序号是从1开始）
:nth-child(-n+2) -n+2就是选择前面两个元素

<div class="navbar">
    <input type="checkbox">
    <span id="span1"></span>
    <span id="span2"></span>
</div>
// 表示 #span1 第一个span
.navbar input:checked ~ span:nth-child(2){
    
}

first-child：选择列表中的第一个标签。

举例：第一行字体显示为红色，代码如下：

li:first-child{
    color: red;
}

last-child：选择列表中的最后一个标签。

举例，最后一行字体显示为绿色，代码如下：

li:last-child{
    color: green;
}

nth-child(n)：选择列表中的第 n 个标签。

nth-child(n+1):奇数行
nth-child(2n-1) : 奇数行
nth-child(2n):选择列表的偶数行

举例：第三行字体显示为蓝色，代码如下：

li:nth-child(3){
    color: blue;
}

nth-child(odd)：选择列表的奇数行。

我们可以通过另外的方法选择奇数行，例如： nth-child(n+1) 、 nth-child(2n-1) 等

举例，奇数行背景显示为灰色，代码如下：

li:nth-child(odd){
    background: #999;
}

li:nth-child(n+1){
    background: #999;
}

li:nth-child(2n-1){
    background: #999;
}

nth-child(even)：选择列表的偶数行。

举例：偶数行背景显示为土黄色代码如下：

li:nth-child(even){
    background: #F6E0AF;
}

li:nth-child(2n){
    background: #F6E0AF;
}

nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个，下同）。

举例：前三行背景色设置为绿色，代码如下：

li:nth-child(-n+3){
    background: #2cae1d;
}

nth-child(n+n)：选择第 n 个之后的元素。

nth-child(n+n) nth-child(n+n)：选择第 n 个之后的元素。

举例：第五行及以后背景色设置为蓝色，代码如下：

li:nth-child(n+5){
    background: #0ab1fc;
}

nth-last-child(n)：选择倒数第 n 个元素。

举例：倒数第三元素字体设置为红色，代码如下：

li:nth-last-child(3){
    color: red;
}

nth-last-child(n+n)：选择倒数第 n 个之前的元素。

举例：倒数第三个及之前的元素字体设置为粗体，代码如下：

li:nth-last-child(n+3){
    font-weight: bold;
}

nth-last-child(3n)：选择第 3、6、. . . 个元素，选择三的倍数。

举例：第3、6、 . . . 三的倍数行背景色设置为橙色，代码如下：

li:nth-child(3n){
    background: orange;
}

nth-last-child(3n+1)：选择第 1、4、7 个元素，从第一个开始每个递增三个。

举例：第1、4、7 . . . 行背景色设置为红色，代码如下：

li:nth-child(3n+1){
    background: red;
}

CSS中的 , > + ~

参考：https://www.cnblogs.com/wenxuehai/p/11449430.htmlopen in new window

1、群组选择器（','）

/* 表示既h1，又h2 */
h1, h2 {  color: red;}

2、后代选择器-子、孙（空格）

/* 表示 h1 下面的所有 span 元素，不管是否以 h1 为直接父元素 */
h1 span {}

3、子元素选择器（'>'）

选择直接子元素

/* 表示 h1 下面的所有以 h1 为直接父元素的 span 元素，注意必须以 h1 为直接父元素 */
h1 > span { }

4、相邻兄弟选择器（'+'）

选择紧接在另一个元素后的元素，而且二者有相同的父元素。

 <ul>    <li>List item 1</li>    <li>List item 2</li>    <li>List item 3</li>  </ul>  <ol>    <li>List item 1</li>    <li>List item 2</li>    <li>List item 3</li>  </ol>

案例

.el-button+.el-button 选择器将会选择紧跟在具有 .el-button 类名的元素后面的、下一个具有 .el-button 类名的元素。

根据您提供的HTML结构：

<div class="el-button">按钮1</div>
<div class="el-button">按钮2</div>
<div class="another-element">其他元素</div>
<div class="el-button">按钮3</div>
<div class="el-button">按钮4</div>

.el-button+.el-button 选择器会选择 "按钮2" 和 "按钮4" 这两个元素

5、兄弟选择器（'~'）

选择在某元素之后的所有兄弟元素，不一定要紧跟在后面，但必须得是相同父元素，即必须是同一级元素。

/* A之后的所有B元素，不一定要紧跟在A后面、相同父元素 */
A ~ B{

}

css 动画

transition & transform

https://www.cnblogs.com/xiaohuochai/p/5347930.htmlopen in new window

transition

css动画open in new window

css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别

参考：https://blog.csdn.net/Candy_10181/article/details/80611009open in new window

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition使用：

transition:all 0.5s;

transition: all .4s ease-in-out .3s;

transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; 先执行top 属性，在执行 transform 属性

transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;

top:calc(50% - 2px);/* 2个span top 都是 偏移 2px,因为，变更后是一个 X 中心点是 在一起的，只是旋转角度方向不一样 */
transform:rotate(-45deg);/*选中角度*/
background-color: #fb7299;
transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;

定义该横线动画：

1.先执行 top属性变更，动画时长 0.3s, ease-in-out 定义动画过度效果-两头慢，中间快
2.top 执行完成后，执行transform 属性变更， 0.3s, ease-in-out

案例1：

光标悬停实现选中效果（缓慢放大）

.head_left .head_tab:hover{
    transform: scale(1.1);
    transition: all 0.6s;
}

案例1：

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

案例：css滚动

参考：https://www.osuu.net/1506.htmlopen in new window

https://www.cnblogs.com/gaomengyao/p/15411384.htmlopen in new window

案例1：

案例2

案例3：

案例：css气泡导航

案例：边框样式

案例文件

div四个角切边

https://blog.csdn.net/qq_33014695/article/details/125444229open in new window

案例：取色器

<input type="color" id="color" name="color" value="#FF0000">

main.html

css动画波纹

CSS样式

卡片反正

参考：https://juejin.cn/post/6969483139701800974open in new window

图片以最合适的尺寸拉伸，不平铺

    background-size: cover;
    background-position: center;
    height: 100%;

内容组成

首先需要一个最外层的 card 来包裹整个翻转区域
然后需要正面和反面的内容（这里简单处理只设置正反面的背景颜色来区分）

利用布局

需要让正面和反面重叠在一起，很容易想到外层 card 用相对定位，内层正反都使用绝对定位都相对于外层 card，使其重叠，然后需要设置反面翻转 180°，翻转隐藏背面需要添加 backface-visibility:hidden。

注意：都是绝对定位元素后来居上，所以正面需要放到反面后面，或者直接设置正面 z-index 大于反面

实现 3D 效果

翻转效果其实是一个 3D 效果，所以这里需要用到一个属性 transform-style 使得子元素能够表现出翻转效果，同时还要设置 transition 实现过渡动效。

transition 需要一个状态就是 hover 卡片时，卡片翻转也就是 card 翻转 180°

补充说明

如果想实现垂直翻转就修改 rotateY 为 rotateX

如果想通过点击事件来触发翻转，那么在点击事件中添加刪除 card 的类即可

重点总结

动画效果：添加 transition 过度
正反重叠：最外层相对定位，内部正反两面绝对定位，反面先翻转 180°
隐藏背面：正反面添加 backface-visibility:hidden
hover 翻转：卡片 hover 翻转 180°
3D 效果：卡片添加 transform-style 使子元素 3D 空间呈现

具体代码实现

<div class="card-filp">
  <div class="back"></div>
  <div class="front"></div>
</div>

<style>
  .card-filp {
    height: 200px;
    width: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: 1s;
  }

  .front,
  .back {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility:hidden
  }
  .front {
    background: lightgreen;
  }
  .back {
    background: lightblue;
  }
  .back {
    transform: rotateY(180deg);
  }
  .card-filp:hover {
    transform: rotateY(180deg);
  }
</style>

开发记录

1.overflow: hidden;

场景说明：父容器增加 border-radius 属性，子元素并没有增加圆角导致父容器的圆角效果被遮挡，正常思路是给子元素也增加 border-radius 属性

其实是可以通过给父容器添加 overflow: hidden 从而实现，不需要单独设置子元素的圆角属性

2. 表格超出容器滚动

表格中显示过多的列，需要水平滚动来查看表格内容

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <th>表头4</th>
        <th>表头5</th>
        <!-- 其他表头列 -->
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>
<style>
  .table-container {
    overflow-x: auto;
    white-space: nowrap;
    position: relative; /* 父容器设置相对定位 */
  }

  .table-container table {
    border-collapse: collapse;
    width: 100%; /* 设置宽度为100% */
    table-layout: fixed; /* 固定列宽 */
  }

  .table-container thead th {
    font-weight: bold;
    position: sticky; /* 表头列设置粘性定位 */
    top: 0; /* 定位到顶部 */
    z-index: 1; /* 置于顶层 */
    background-color: #fff; /* 设置背景色 */
  }

  .table-container th,
  .table-container td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
    overflow: hidden; /* 溢出内容隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    max-width: 200px; /* 设置最大宽度 */
  }
</style>

引入字体包

字体包使用

其他字体包

虚线

border: 1px dotted #E6E6E6; 设置的虚线无法控制间距

            height: 1px;
            background-image: linear-gradient(to right, #E6E6E6 0%, #E6E6E6 50%, transparent 50%);
            background-size: 8px 1px;
            background-repeat: repeat-x;

由于层级导致元素无法点击

pointer-events: auto;

案例：

1. :not 使用

场景说明：判断第二个元素（second）是否存在，从而设置第一个元素样式 first
注：选的是子，无法选择到父节点

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

假如:has 存在则写法如下，但是has 目前不可用

.container > .first:has(+ .second) {
  // styles here
}

解决

.container > .first:not(:only-child) {
     // styles
}
/// 或者

.container > .first:not(.second) {
     // styles
}

案例：选取div1中所有不是select的元素

#div1 :not(select)

2. 移动端一些常见的默认样式问题

元素无故有个边框-移动端, 通过设置outline: none;

1.ios按钮变灰色,给按钮加样式:

-webkit-appearance: none;

2.有圆角

button

3.去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus

4.去掉高光样式：

input:focus

5.所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，但我们可以重新根据自己的需要设置一下

input:focus,textarea:focus

6.去除IE10+浏览器文本框后面的小叉叉

input::-ms-clear

7.禁止textarea拖拽放大

textarea

3.滚动/锚点/吸顶

说明：头部是固定的，B区域和C区域都是可以滚动的，同时，C区域中存在tab需要吸顶
开发设计：主界面包含头部，其他都是用组件的方式封装出去的，A区域高度是固定的，B区域没有给定高度。
要想tab 能吸顶，并且最高只能移动到头部的下面。则需要保证 C区域的高度，是页面尺寸的高度减去头部的，否则tab 的位置无法固定在指定位置
因为C区域是以组件的形式封装出去的，所以只需设置C组件 position: sticky; top: 0; 实现吸顶

12334

伪类的使用

案例1：

tab的底部横线，或者2个元素中间的分割线，通过指定宽度

案例2

两个 span 元素之间添加一个高度只有80%的分割线，并且让它居中，同时使分割线和文字之间左右间隔为10px

span:first-of-type::after {
  content: "";
  display: inline-block;
  height: 80%;
  width: 1px;
  background-color: #333;
  margin: 0 10px;
  vertical-align: middle;
}

如果是多个div并排，并且最后一个元素不要分割线

.box {
      display: inline-block;
      position: relative;
      height: 100px;
    }

/*.box:not(:last-child)::after */
    .box::after {
      content: "";
      position: absolute;
      top: 10%;
      right: 0;
      width: 1px;
      height: 80%;
      background-color: black;
    }

    .box:last-child::after {
      display: none;
    }

案例3

tab使用背景图

背景图遮挡文字

<div class="form-tabs">
    <div class="form-tab check">人员列表</div>
    <div class="form-tab">审批过程</div>
</div>

    .form-tabs {
        margin-top: 20px;
        display: flex;
        align-items: center;
        background-color: #ccc;
        border-radius: 8px 8px 0px 0px;
        .form-tab{
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
          z-index: 2;
            &:first-child.check{
                &:after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0px;
                    width: 100%;
                    height: 50px;
                    z-index: -1;
                    background-image: url('../../../assets/images/tab/TAB.png');
                    background-size:100%100%;/*可以让 背景图片完全填充*/
                }
            }
            &:last-child.check{
                &:after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0px;
                    width: 100%;
                    height: 50px;
                    z-index: -1;
                    background-image: url('../../../assets/images/tab/TAB1.png');
                    background-size:100%100%;/*可以让 背景图片完全填充*/
                }
            }
        }
    }

图片的使用

1. 将图片放到估计尺寸的容器导致变形

当将具有固定尺寸的图片放入具有不同尺寸的容器中时，可能会导致图片变形问题。以下是一些解决方法：

使用CSS的object-fit属性：object-fit属性可以控制图像在容器中的适应方式，从而避免变形。通过将其设置为contain，图像将在保持纵横比的同时完全适应容器。

使用 object-fit: contain; 图片会根据父容器自适应纵横比

.your-container {
  width: 300px; /* 容器的宽度 */
  height: 200px; /* 容器的高度 */
}

.your-container img {
  object-fit: contain; /* 图片适应容器，保持纵横比 */
  width: 100%;
  height: 100%;
}

使用CSS的background-image属性：将图片作为背景图像设置给容器，并使用background-size属性来调整背景图像的尺寸，也可以避免图片变形。

会铺满父容器，但是图片显示不全

.your-container {
  width: 300px;
  height: 200px;
  background-image: url("your-image.jpg");
  background-repeat: no-repeat;
  background-size: cover; /* 背景图像完全覆盖容器 */
  background-position: center center; /* 居中对齐 */
}

小卡片

获取光标向上位移，并且更改box-shadow 使其有立体效果

.lovexhj2ContentText li {
    /* width: 100%; */
    /* height: 150px; */
    /* margin: 0 15px; */
    
    box-shadow: rgba(50, 50, 93, 0.35) 0px 13px 27px -5px, rgba(0, 0, 0, 0.4) 0px 8px 16px -8px;
}

.lovexhj2ContentText li:hover {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 23px 27px -5px, rgba(0, 0, 0, 0.3) 0px 18px 16px -8px;
}

列表布局

场景描述，每行2个，最后一个如果是单个，则宽度设置为100%

父节点设置 display: flex; flex-wrap: wrap;

每项设置宽度为width:50%,同时取奇数的最后一项，设置宽度为100%

.content-item.long_omit:nth-child(odd):last-of-type {
    width: 100% !important;
}

使用记录

缩放失效

transform: scale行内元素失效，解决办法：
在其父元素上设置
设置 display: inline-block; 指定为行内快元素

transform: scale(0.7);
transform-origin: left center;
text-align: center;
display: inline-block;

    <div class="lsh-chart-legend bk">
            <div class="legend-col" v-for="(item,index) in totalData">
                <span>{{item.name}}</span><span>{{item.value}}</span></div>
        </div>

 .lsh-chart-legend {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .legend-col {
            width: calc(50% - 5px);
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;

            &:nth-child(2n) {
                margin-left: 10px; /* 指定每行 2个元素的间隔，是每隔2个设置*/
            }

            span:nth-child(2n) {
                margin-left: 10px; /* 指定每行 2个元素的间隔，是每隔2个设置*/
            }

            &:before {
                content: '';
                display: inline-block;/*不加这个会导致 before 定义的样式不生效*/
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #f56c6c;
                margin-right: 5px; /* 调整点和文本之间的间距 */
            }
        }
    }

F12元素没有hover等样式

F12 元素tab界面下右侧 :hov 勾选 :hover

`pointer-events: none;`

场景比如画布上面添加一个div层，需要进行交互，又不影响这个画布，通过设置这个div pointer-events: none; 并且将其图层置在画布下面

pointer-events: none; 是一个 CSS 属性，用于控制元素如何响应鼠标事件。当你将这个属性应用于一个元素时，该元素将不会对任何鼠标事件（如点击、悬停等）作出响应。这意味着用户无法与该元素进行交互，比如点击按钮或链接。

使用场景

禁用交互：在某些情况下，你可能希望暂时禁用用户与某些元素的交互，例如在加载状态下。
```
css.loading {
    pointer-events: none;
}
```

叠加元素：如果你有一个覆盖在其他内容上的元素，而你希望用户可以与下面的元素交互，可以使用这个属性。

css.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 允许与下面的元素交互 */
}

注意事项

该属性只影响指针事件，对键盘事件没有影响。
如果父元素设置了 pointer-events: none;，那么所有子元素也会继承这个属性。

02.CSS

# 02.CSS

# 常用属性

# 1. 文本

# 1.1 letter-spacing 属性增加或减少字符间的空白（字符间距）。

# 1.2 换行

# 三角的实现

# CSS绘制各种各样的形状图形

# 文字效果

# 文字阴影：CSS3属性 text-shadow

# 阴影

# CSS3 box-shadow 属性

# 字体阴影

# 文字超长

# 媒体查询

# 渐变色

# linear-gradient

# 文字渐变色

# 案例：

# 背景设置渐变

# CSS 选择器

# 属性选择器

# nth-child 属性

# first-child：选择列表中的第一个标签。

# last-child：选择列表中的最后一个标签。

# nth-child(n)：选择列表中的第 n 个标签。

# nth-child(odd)：选择列表的奇数行。

# nth-child(even)：选择列表的偶数行。

# nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个，下同）。

# nth-child(n+n)：选择第 n 个之后的元素。

# nth-last-child(n)：选择倒数第 n 个元素。

# nth-last-child(n+n)：选择倒数第 n 个之前的元素。

# nth-last-child(3n)：选择第 3、6、. . . 个元素，选择三的倍数。

# nth-last-child(3n+1)：选择第 1、4、7 个元素，从第一个开始每个递增三个。

# CSS中的 , > + ~

# 1、群组选择器（','）

# 2、后代选择器-子、孙（空格）

# 3、子元素选择器（'>'）

# 4、相邻兄弟选择器（'+'）

# 5、兄弟选择器（'~'）

# css 动画

# css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别

# transition使用：

# 案例1：

# 案例1：

# 案例：css滚动

# 案例1：

# 案例2

# 案例3：

# 案例：css气泡导航

# 案例：边框样式

# 案例：取色器

# css动画波纹

# CSS样式

# 卡片反正

# 图片以最合适的尺寸拉伸，不平铺

# 内容组成

# 利用布局

# 实现 3D 效果

# 补充说明

# 重点总结

# 具体代码实现

# 开发记录

# 1.overflow: hidden;

# 2. 表格超出容器滚动

# 引入字体包

# 虚线

# 由于层级导致元素无法点击

# 案例：

# 1. :not 使用

# 2. 移动端一些常见的默认样式问题

# 3.滚动/锚点/吸顶

# 伪类的使用

# tab使用背景图

# 图片的使用

# 1. 将图片放到估计尺寸的容器导致变形

# 小卡片

# 列表布局

# 使用记录

# 缩放失效

02.CSS

常用属性

1. 文本

1.1 letter-spacing 属性增加或减少字符间的空白（字符间距）。

1.2 换行

三角的实现

CSS绘制各种各样的形状图形

文字效果

文字阴影：CSS3属性 text-shadow

阴影

CSS3 box-shadow 属性

字体阴影

文字超长

媒体查询

渐变色

linear-gradient

文字渐变色

案例：

背景设置渐变

CSS 选择器

属性选择器

nth-child 属性

first-child：选择列表中的第一个标签。

last-child：选择列表中的最后一个标签。

nth-child(n)：选择列表中的第 n 个标签。

nth-child(odd)：选择列表的奇数行。

nth-child(even)：选择列表的偶数行。

nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个，下同）。

nth-child(n+n)：选择第 n 个之后的元素。

nth-last-child(n)：选择倒数第 n 个元素。

nth-last-child(n+n)：选择倒数第 n 个之前的元素。

nth-last-child(3n)：选择第 3、6、. . . 个元素，选择三的倍数。

nth-last-child(3n+1)：选择第 1、4、7 个元素，从第一个开始每个递增三个。

CSS中的 , > + ~

1、群组选择器（','）

2、后代选择器-子、孙（空格）

3、子元素选择器（'>'）

4、相邻兄弟选择器（'+'）

5、兄弟选择器（'~'）

css 动画

css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别

transition使用：

案例1：

案例1：

案例：css滚动

案例1：

案例2

案例3：

案例：css气泡导航

案例：边框样式

案例：取色器

css动画波纹

CSS样式

卡片反正

图片以最合适的尺寸拉伸，不平铺

内容组成

利用布局

实现 3D 效果

补充说明

重点总结

具体代码实现

开发记录

1.overflow: hidden;

2. 表格超出容器滚动

引入字体包

虚线

由于层级导致元素无法点击

案例：

1. :not 使用

2. 移动端一些常见的默认样式问题

3.滚动/锚点/吸顶

伪类的使用

tab使用背景图

图片的使用

1. 将图片放到估计尺寸的容器导致变形

小卡片

列表布局

使用记录

缩放失效

F12元素没有hover等样式