我的css笔记

有些css 不常用，又难记，特此做笔记，提高开发效率

c3选择器

p~div选中p后面的div

a[href="http"] 链接是
a[href^="http"] 链接开头是
a[href$="http"] 链接结尾是

input[type="text"] 类型是

ul li:first-child{ul 里面的第一个 li 元素}
ul li:last-child{ul 里面的最后一个 li 元素}
ul li:nth-child(evev){ 偶数 li }
ul li:nth-child(odd){奇数 li }
ul li:nth-child(3n+1){3de倍数个再加1 = 第1,4,7,10——的 li }
p:first-of-type 选择的 p 元素是其父元素的第一个 p 元素：
ul li:last-of-type{选择指定类型的最后一个子元素}
ul li:nth-of-type(1){在ul 父级里面第一个类型为li的元素}
        nth-last-of-type() 从后往前数
        
 p:only-of-type 父级的唯一p元素       
p:only-child p 元素是其父级的唯一子元素
p:nth-of-type(2)	选择p元素是其父级的第二个p元素
li:empty{}  li里面是空的的

input:disabled{} 表示禁用的表单
input:enabled{} 表示可用的表单
input:checked{} 选择被选中的表单

::selection{} 选择被选中的文字

::before ::after伪元素要跟着content去使用，不然就没有效果了

div::before{content:"before添加的内容"}  元素前面添加内容

div::after{content:"after添加的内容"}  元素后面添加内容

disabled属性:禁用表单元素

&>div:not(:last-child)

 td:not(:first-child){
	text-align:center;
}

td:not(:nth-child(4n)){
  text-align:center;
}

p:first-letter	选择每一个<p>元素的第一个字母
p:first-line	选择每一个<p>元素的第一行

线性渐变

  hsl (色调，饱和度，亮度) 
  线性渐变颜色
  background-image:linear-gradient(to right,pink,cyan,purple)
  background-image:linear-gradient(45deg,pink,cyan,purple)
  background-image:linear-gradient(45deg,pink 45%,red 50%) /*百分比规定开始渐变的位置*/
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), 
  						linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
  background-image:repeating-linear-gradient(重复渐变)
  径向渐变
		默认是椭圆ellipse
		圆形渐变circle
  background-image:radial-gradient();
  background-image:radial-gradient(circle,red,yellow);
	
  border-image: linear-gradient(-160deg,rgba(255, 255, 255, 0.3) 20% ,rgba(255, 255, 255, 0.8)
	 40%,rgba(255, 255, 255, 0.3) 70%,rgba(255, 255, 255, 0.8) 90%) 1;

圆角

  斜杆二组值
  border-radius:200px/100px;
  https://autoprefixer.github.io/ 兼容工具

盒子阴影

4个值，x轴偏移量,y轴偏移量,阴影模糊程度，阴影颜色
border-shadow:20px 20px 15px rgba(0,0,0,0.5);
便宜量为0相当于盒子4周出现的阴影
box-shadow: 0 0 15px rgba(0,0,0,0.5) inset;内阴影
内阴影x为0

盒子倒影

 /* -webkit-box-reflect: 方向 元素与倒影的距离    倒影效果（渐变）; */
    -webkit-box-reflect: left 10px
    linear-gradient(90deg,red,blue);
//方向参数 left right above below

文字阴影

text-shadow:10px 10px 5px rgba(255,0,0,0.5);
x轴偏移量 y轴偏移量 模糊程度 颜色

自定义字体:

p{	font-family:"mi";}
@font-face{
font-family:"mi";自定义字体的名字
src:url(gift.ttf);自定义字体的路径
}

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: normal;
  src: local('Noto Sans SC'), 
  url('//portal.volccdn.com/obj/volcfe/activity/20211215/NotoSansSC-Regular.otf') format('truetype');
}
p{
font-family: Noto Sans SC;
}

文字排列方式

  text-orientation: upright;
  writing-mode: vertical-lr;

单行文字溢出隐藏

	overflow:hidden;
	/*文字不换行*/
	white-space:nowrap;
	/*超出文字以...显示*/
	text-overflow: ellipsis; 
	text-overflow 默认值clip超出部分直接裁剪
	英文会溢出

多行文字溢出隐藏

    display: -webkit-box;
    -webkit-line-clamp: 2; 用来限制在一个块元素显示的文本的行数。
    -webkit-box-orient: vertical; 从顶部向底部垂直布置子元素
    overflow: hidden;
    text-overflow: ellipsis;

filter滤镜效果

	filter滤镜 10种滤镜
	模糊 filter:blur()  单位为像素  记住 其他了解
	灰度 filter:grayscale(1) 取值0-1
	亮度 filter:brightness(1.2); 1是正常
	对比度 filter:contrast(1);对比度 1是正常
	反色处理 filter:invert(1); 反色处理 取值 0-1
	饱和度 filter:saturate(2); 取值数字
	色相转换 filter:hue-rotate(120deg) 取值度数 
	drop-shadow图片阴影 
	透明度 opacity 取值0-1
	褐色 filter:sepia()  取值0-1
	滤镜可以一起使用 中间空格隔开
	filter:sepia(1) conttrast(1.4); 先后顺序有差别

滚动条隐藏

父元素宽度设置小
子元素宽度设置大
父元素设置滚动条
overflow-x:scroll;
父元素设置隐藏滚动条
 &::-webkit-scrollbar {
    display: none;
 }
  -ms-overflow-style: none;/* IE 10+ */
  scrollbar-width: none;/* Firefox */

案例

隐藏水平滚动条，同时允许垂直滚动条：
.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

hover小手

cursor:pointer;

cursor: not-allowed;

css禁用点击

pointer-events: none;

pointer-events: all;

背景模糊

元素后面区域添加图形效果如模糊或颜色偏移
为了看到效果，必须使元素或其背景 透明
或者不设置背景色

filter:blur() 是整个所有全部模糊
backdrop:blur() 是背景模糊，不影响元素上文字
和opcity透明和rgba透明，道理差不多
父元素添加了backdrop:blur()，子元素再添加会不生效
可以添加伪元素来增加模糊

适用元素all-ele svg

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

背景图片设置

background-size:20px 20px;
background-size:80% 80%; 为当前容器的百分比
background-size:cover; 全部铺满 图片可能会被裁剪
background-size:contain; 只要有一边铺面即可
backround-image:url(路径);
background-attachment:fixed;	

transition过度

过渡时间  过渡样式  过渡形式  延迟时间 [，过渡时间  过渡样式  过渡形式  延迟时间]

transition: 3s width linear 2s, 2s height linear 3s,4s background-color linear 2s;

transition-property:单独设置过度属性的
transition-duration 单独设置过度时间
transition-timing-function:单独设置过度效果的
transition-delay:单独设置过度延迟的
transition只能对有数字的属性和颜色生效 z-index也不生效
第一个参数是设置过渡效果的属性默认值all
表示所有属性都执行同一个过度效果
第二个参数是设置过渡效果的时间
第三个参数是表示动画执行的效果
/*linear 匀速
    ease 慢速开始最后很快 ease是慢的开始
	ease-in 慢速开始
	ease-out 慢速结束
	ease-in-out 慢速开始和结束，中间快
	cubic-bezier(n,n,n,n) 参数 0-1之间 
 */
第四个参数表示延迟时间，表示多长时间后执行过渡效果

案例

transition:width 3s ease-in-out 5s,
height1s,background 1s ease-in-out 6s;
transition:transform 2s ,width 3s ease-in-out
5s,height 1s,background 1s ease-in-out 6s;

transform 转换

traslate(x,y)
可以传百分比和px
一个值默认x
translateX();/translateY();
scale(取值范围0-1)
默认中心缩放

一个括号里只可以传一个参数
scaleX()/scaleY()

rotate(deg) 默认中心旋转
transform-origin:center bottom;设置旋转中心
rotateX()/rotateY()
transform: rotate3d(1, 0, 1, -180deg);

skew 倾斜 
skew(45deg)只可以传一个参数默认中心
skewX(45deg)/skewY(45deg)
transform-origin:top right; /*默认center center;*/
	(0,50%)
	第一个表示横向基准点
	第二个表示纵向基准点

注意 3d多了一个z轴

• 一个参数默认中心 x y 2d不可以写z
• translate写3d必须传3个值
• scale 没有3d效果 - skew 没3d
• scaleZ 由于元素本身没有厚度，此属性无效
• 不加景深 Z轴相关效果看不见
• 不加transform-style: preserve-3d; 没3d效果
• rotate 属性要分开单独写 不可以复合写

控制元素转换效果

  perspective: 500px;  景深视效果
  这个属性一般添加给3D元素父级
  transform-style: preserve-3d;表示所有子元素在3D空间中呈现
  syle属性需要设置在父元素中，
  并且高于任何嵌套的变形元素
  backface-visibility: visible|hidden;
  perspective-origin:控制摄像机位置,默认center center

动画animation

合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

动画语法:

animation: name duration timing-function delay iteration-count 
					direction fill-mode play-state;

animation-timing-function 参数

linear	动画从头到尾的速度是相同的。	测试
ease	默认。动画以低速开始，然后加快，
            在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在 cubic-bezier
函数中自己的值。可能的值是从 0 到 1 的数值。

animation-fill-mode:

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，
应用开始属性值（在第一个关键帧中定义）。
both		向前和向后填充模式都被应用。

animation-iteration-count: n|infinite; 次数

animation-direction: normal|alternate;

轮流反向播放

animation-play-state: paused|running;

指定动画是否正在运行或已暂停。
paused规定动画已暂停。running规定动画正在播放。

过渡和动画的区别

1、transition 属性转换时，只能控制属性的初始值和结束值
2、transition 的效果必须要有元素的事件才能触发效果
比如 hover js操作
3、keyframes 动画可以不设置触发事件，通过属性的
设定直接演出动画效果

media多媒体

user-scalable:禁止用户缩放
initial-scale:原始缩放比例
width:设置适口宽度为设备宽度
max-width :小于此宽度时
min-width：大于此宽度时
max-height:大于此高度时
min-height:小于此高度时
! 注意：每个单词之间，包括括号和单词之间，都要保留空格
orientation:landscape 横屏时
orientation:portrait 竖屏时

媒体查询

  @media only screen and (orientation: landscape) {
    display: none;
  }
   @media screen and (min-width: 480px) and (max-width: 678px) {
  
   }

   @media screen and (min-width: 679px) and (max-width: 1023px) {

   }

计算样式

    calc() :用于动态计算长度值。
    需要注意的是，运算符前后都需要保留一个空格，
    例：width: calc(100% - 10px)；


	font-size: clamp(1rem, 2.5vw, 2rem);
	上述案例设置随窗口大小改变的字体大小，但是无论窗口怎么改变，
	字体大小不会小于设置的最小值，也不会超过设置的最大值。

盒子模型

box-sizing:content-box; 默认标准盒模型
宽度=内容宽度
box-sizing:border-box;  怪异盒模型
宽度=content+padding+border

scroll相关的属性

  阻止滚动链接，滚动不会传播给祖先
  overscroll-behavior: contain;

  平滑滚动，滚动容器属性
  scroll-behavior: smooth;

字符换行

word-break:break-all；所有的都换行

word-wrap:break-word； 标点换行

弹性盒子

可以简洁，完整，响应式(自适应)的实现各种页面布局

采用flex布局的元素，称为弹性盒子 或者 flex容器，
他的所有子元素称为弹性元素 或者 flex项目

主轴：元素盒子排列的方向（默认的排列方向x轴，
当然不是说主轴就是x，因为我们可以通过属性来
改变主轴的方向）

交叉轴：和主轴垂直的轴

弹性盒子属性/容器属性：

flex-direction 改变主轴的方向。

• 属性值有四种情况：

• {flex-direction: row;}/默认值，从左往右排列/
• {flex-direction: row-reverse;}/从右往左排列/
• {flex-direction: column;}/从上往下排列/
• {flex-direction: column-reverse;}/从下往上排列/

flex-wrap 控制容器是单行还是多行

属性值有三种情况：
{flex-wrap: nowrap; } 默认值，不换行，会压缩，不会超出父级
{flex-wrap: wrap; } /*换行*/
{flex-wrap: wrap-reverse; }
只是单纯的上下反转，不是序号改变

复合属性：

• flex-flow:是 flex-direciton 和 flex-wrap两个属性综合

justify-content定义弹性元素在主轴上的对齐方式

用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。
属性值五种：

• 1 flex-start //默认值，从主轴开始部分开始排列(说白了就是左对齐)
• 2 flex-end //从主轴结束部分开始排列（说白了是右对齐）
• 3 center //居中
• 4 space-between // 两端对齐，中间有相等的间隔
• 5 space-around //环绕对齐，每个项目两边的间隔相等
• 6 space-evenly 元素间距离平均分配

align-items定义弹性元素在交叉轴上如何对齐

• align-items: stretch; //弹性元素不设置高度时被拉伸以适应容器（默认值）

• align-items: flex-end; //交叉轴下沿对齐
• flex-start 元素位于容器的交叉轴开头
• align-items: center; // 交叉轴中部对齐
• align-items: baseline; //项目里面的文字的基线对齐

align-content定义了多根主轴在（交叉轴的对齐方式）

如果项目自有一根轴线，则不起作用
只适用于多行显示的弹性容器

属性值六种

• stretch 元素被拉伸以适应容器（默认值

• flex-start //与交叉轴上沿紧密对齐
• flex-end //与交叉轴下沿紧密对齐
• center //居中
• space-between // 与交叉轴两端对齐，中间主轴宽度平均分配
• space-around //环绕对齐，中间主轴宽度平均分配
• space-evenly //元素间距离平均分配

弹性元素

弹性盒子里面的元素即为弹性元素
放在容器盒子中的元素即为弹性元素。
不能使用float与clear规则
弹性元素均为块元素
绝对定位的弹性元素不参与弹性布局

align-self

用于控制单个元素在交叉轴上的排列方式，
align-items 用于控制容器中所有元素的排列，
而 align-self 用于控制一个弹性元素的交叉轴排列。

选项 说明

stretch 不设置高，高度占满盒子的高
flex-start 元素紧靠主轴起点
flex-end 元素紧靠主轴终点
center 元素从弹性容器中心开始

flex-grow

用于将弹性盒子的可用空间，分配给弹性元素。可以使用整数或小数声明。
下例中为三个DIV 弹性元素设置了1、3、6 ，即宽度分成10等份，
第三个元素所占宽度为(宽度/(1+3+6)) X 6。

如果弹性元素设置了宽度，将把（弹性盒子-弹性元素宽度和）
后按照 flex-grow 进行分配 。

flex-shrink

与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值

案例

 article {
        border: solid 5px silver;
        width: 400px;
        height: 120px;
        display: flex;
        box-sizing: content-box;
    }
    article div:nth-child(1) {
        flex-shrink: 0;
    }
    article div:nth-child(2) {
        flex-shrink: 1;
    }
    article div:nth-child(3) {
     flex-shrink: 3;
    }
    article * {
        width: 200px;
        height: 100px;
       }
 计算方式：
   flex-shrink: 0; 代表不缩放，还是原来的宽度
   flex-shrink: 1;
   flex-shrink: 3;
   父级400，3个子级每个200，所以必须缩小200，
   flex-shrink0 代表不缩放，还是原来的宽度
   1+3 总共把200分成4份
   flex-shrink 1 就是200里面的其中1份(200-50) 
   flex-shrink 3 就是200里面的其中3份(200-150) 

flex-basis

flex-basis的优先级高于width、height属性。
flex-basis: 100px;

flex

flex是flex-grow、flex-shrink 、flex-basis缩写组合
flex: 1 0 100px;

order

用于控制弹性元素的位置，默认为 order:0 数值越小越在前面，可以负数或整数。

弹性文本

文本节点也在弹性布局操作范围内

绝对定位

绝对定位的弹性元素不参与弹性布局

grid网格布局

弹性布局适用于一维布局，网格布局是二维布局

clip-path

offset-patch

offset-path您可以定义您想要的任何形状的特定路径

will-chang

will-change: left, top;

最后别忘记看兼容性

控制台，一般不太需要关注兼容性，移动端和官网类型的需要关注
兼容性