css样式

  position: sticky;   粘性定位 
  user-select: none;  禁止选中文字
  caret-color:red;    改变文本框光标的颜色
  border-collapse: collapse; 去除表格间隙
  resize: none; 禁止文本域拖拽

   /* x y z 轴距离 */
  transform: translate3d(0, -2px, 0);
  padding-bottom: env(safe-area-inset-bottom) 屏幕安全距离
   

去掉滚轴边框

::-webkit-scrollbar {
  display: none;
}

显示省略号

单行时
white-space: nowrap;   
text-overflow: ellipsis;    
overflow: hidden;    
  多行   
word-break: break-all;
text-overflow: ellipsis; 
overflow: hidden;    
-webkit-line-clamp: 2;   
display: -webkit-box;    
-webkit-box-orient: vertical; 

text-align: justify;

当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的

字体

direction 和 unicode-bidi 属性可用于更改元素的文本方向：
direction: rtl;
unicode-bidi: bidi-override;
text-transform:uppercase; 字母大写 lowercase 字母小写 capitalize; 单词首字母大写
letter-spacing: 3px; 文本字符间距
text-shadow: 2px 2px 5px red; 最简单的用法是只指定水平阴影（2px）和垂直阴影（2px文字阴影
text-decoration: line-through; 字体添加删除线

border-radius

border-radius 属性可以接受一到四个值。规则如下：
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：

边框img

border-image 属性允许您指定要使用的图像，而不是包围普通边框。
该属性有三部分：用作边框的图像 在哪里裁切图像 定义中间部分应重复还是拉伸
border: 10px solid transparent; 必须有
border-image: url(border.png) 30 round;

hover事件的问题

我们给导航栏写hover事件改变背景色是也会给我们选中的也给冲突的 ! important 也可以解决，但是下面这种方式也可以；
p:not(.active):hover{ :not(类名不加引号)防止被冲突的类名
background-color: skyblue;
}

css变量

:root { --blue: #1e90ff; } 声明全局变量 使用 var(–blue);
可以通过介绍获取

    1 获取   let r = document.querySelector(':root');
    2 修改    r.style.setProperty('--blue','red');
    3 获取    let rs = getComputedStyle(r);
    console.log(rs.getPropertyValue('--blue'));

css背景属性

Grid 网格布局

display:grid;开启网格布局
 grid-template-columns：100px 100px;  属性定义网格布局中的列数，并可定义每列的宽度。可以使用 1fr 这是      grid 独有的
 grid-template-columns: repeat(2,1fr)  第一个参数重复的次数 第二个参数宽
 grid-template-rows    属性定义每列的高 度。
 grid-column-gap 属性设置  X 轴 之间的间隙：
 grid-row-gap    属性设置 Y 轴 之间的间隙：
 grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写属性：
 grid-column-start: 1;   grid-column-end: 3; 把网格项目放在列线 1，并在列线 3 结束它： x轴
  grid-row: 1 / 3;
 grid-row-start: 1;    grid-row-end: 3; 把网格项目放在行线 1，并在行线 3 结束它： y轴
  可以缩写   grid-column: 1 / 3;
  grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性  grid-area: 1 / 2 / 5 / 6;
  grid-area: myArea; 也可以用来命名 用命名的方式进行布局
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea'  'myArea myArea...';
}
  
 justify-content: space-evenly; 值 "space-evenly" 会在列之间以及列周围留出相等的空间：剩下的类似于flex布局的用法
 align-items:跟flex布局中用法一样

css 计算 calc()

calc() 支持我们平时用的复制 比如，+ - * /

div{width: clac(100% - 100px);} // calc() 函数中的运算符要与要计算的字符用空格，隔开，否则不生效

边框类型

dotted - 定义点线边框 ：小圆点
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

nth-type-of

:nth-of-type(2n) 偶数
:nth-of-type(2n-1) 奇数
:nth-child(3) 表示选择列表中的第 3 个标签
:nth-child(2n) 这个表示选择列表中的偶数标签
:nth-child(2n-1) 这个表示选择列表中的奇数标签
:nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。
:nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。
:nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。