css简单记录

1.css 引入
<link rel="stylesheet" href="路径">
2.注释
/* */
3.css引用css/依赖
@import url('路径')
3.less sass
安装less 插件 --easy less
后缀名为.less
当保存.less文件是会自动生成.css文件，可以自动解析嵌套关系

选择器	作用
*	全部选中
标签	选中所有该类标签
.类名	选中该类
#idname	选中该id id应该是唯一的=>js逻辑不出错
：伪类	active 点击 hover 悬停 focus 焦点 target 目标（锚点）
：empty	没有内容的标签
h1:first-of-type	选择第一个为h1的标签
:only-child :only-od-type	唯一选择器 有且只有一个子元素
:nth-child(n)	第n个孩子
:nth-last-child(n)	倒数第n个孩子
:not(:nth-child(n)	排除第n个孩子
::first-letter	首个文本文字
::after ，::before	追加元素 conten:attr(link)

标号	作用
，	并列
空格	一般定义为里边 父子孙关系
>	只定义父子关系
~	定义所有兄弟元素
+	紧挨着的兄弟
[]	属性
[title^=‘qwe’]	以 qwe开头的所有title属性所标记的区域
[title$=‘qwe’]	以qwe 结束的所有title属性所标记的区域
[title*=‘qwe’]	包含qwe的所有title属性所标记的区域-连起来是一样的
[title~=‘qwe’]	包含qwe的所有title属性所标记的区域 -一个单词
[title|=‘qwe’]	以qwe开始，后面链接-的也可以

权重

名称	权重位
标签	1
class	10
属性	10
id	100
行级样式	1000
!import	强制提升（不推荐）
继承	null
*	0(0>null)

预处理
.less

文本内容

名称	作用
font-family	多定义几个字体
font-weight	自重(笔画宽细) // bold normal 400;
font-size	字体大小//small large 400 30% em（宽度）
color	颜色
line-height	行高 // em
font-style	字体样式 倾斜
font-variant	大小写
text-transfrom	大小写
----------	------
text-decoration	线条控制
text-shadow	文本阴影 颜色 x偏移 y偏移 模糊
white-space	空格
text-overflow	文本溢出 ellipsis
text-indent	文本缩进 em
text-align	水平对齐
vertical-aligh	垂直对齐
letter-spacing world-spacing	字符间距
writing-mode	排版方式 //vertical-rl

简写：font:font-weight font-style font-size/line-height font-family

自定义字体

@font-face{
  font-family: "name";
  src:url("路径") format("类型")
}
使用
font-family: name;

盒子模型

属性	用法
border	border：solid 10px red; 为负值则是向相应方向溢出
box-sizing	box-sizing:border-box固定盒子大小
border-radius	border-radius:30px 40px 20px 10px; 圆角 如果为%表示从每条边的%开始画圆
margin	边距在y方向是取大值，而不是相加
outline-style	轮廓线 outline-style：solid 20px red 不占空间位

display	用法
none	不显示，从文档中删除
inline-lock	还是可以设置宽高，行内的div
inline	单纯的文本，不可设置宽高
flex	弹性盒模型

visibility	用法
hidden	不显示，但是在文档中仍然有元素，相当于opacity为0

溢出overflow	作用
scroll	滚动条，有限区域里面装更多的东西
auto	如果装得下，就装，装不下就滚动条
hidden	溢出就隐藏（轮播图）
text-overflow:ellipsis	文本溢出显示...

尺寸	作用
width	px em % vw
height	px em %
min-width min-height	% 最小（图片可用）
max-width max-height	% 最高
calc	vh
height:fill-available	填充可用空间，自适应高度，宽度同理
width:fit-content	宽度同内容相同
width:max-content	根据内容来定义宽度

背景 background	作用
-color	rgb(),rgba()
-image	url(路径) 不会撑开包裹元素，,链接设置多个背景图片
-clip	content-box内容裁切，padding-box 背景颜色覆盖到哪里，默认覆盖border
-repeat	默认重复 no-repeat repeat-x/y space(平均分配)
-attachment: fixed	固定 scroll 滚动
-position	center % x-y 方式
-size	x-y方式 % px cover(完全覆盖，会变形) contain(完全显示，会留白)
background：red url no-repeat center	一行定义

阴影shadow	作用
box-shadow: x y 模糊度 rgb	盒子阴影

渐变	作用
linear-gradient(角度，red 标志位,blue,中间点，black)	线性渐变 标志位表示该颜色在相邻颜色之间过渡，渐变范围，中间点表示前一个颜色所占比例
radial-gradient(位置（x-y），red,blue,black)	镜像渐变
repeat-linear-gradient(角度，red 标志位,blue,中间点，black)	重复渐变

表格(display)	作用
dispaly:table-header-group	表头
dispaly:table-row-group	中间
dispaly:table-footer-group	底部
dispaly:table-row	行
display：table-cell	单元格
border-collapse:collapse	将单元格的线合并
border-spacing:px	单元格线间距
empty-cells；hidden	空单元格隐藏

列表	作用
list-style-type	decimal 数字 lower-roman 小写罗马 none
list-style-image:url()	自定义

浮动	作用
float	left right
clear	清除浮动 left 清除左边浮动 right 同样（空的div用来清除）用::after 追加块元素同样可以 overflow
shape-outsude:padding-box	环绕，内容在内边距处 polygon也可 url() 让内容围着图片走
clip-path:circle(大小，圆心x-y模式)	elllipse 是椭圆 polygon(坐标点，坐标点)

BFC 影响尺寸和边距，浮动触动后，浮动不会发生重叠overflow:auto 即overflow会出发BFC
文档流，从上到下，从左到右，浮动之后脱离文档流，不占用空间位，浮动元素会归为一组，会对后面元素产生作用，浮动之后行级元素会变成块级元素（行内元素不可以设置宽度之类）

定位position	作用
:relative	空间位保留 以自己为标准
:absolute	空间位丢失，默认以body 为标准移动
子绝父相	子参照最近relative父进行定位（子不设置宽高的情况下会拉扯填充改变尺寸）
居中	像素计算/位于居中之后移动子
z-index	设置层级
:fixed	固定定位 以页面为参考（固定菜单 ，滚动时不变）
:sticky	粘性定位 （使用top left 等进一步定位 父子级会顶走，同级慢慢覆盖）

弹性布局

弹性盒模型flex	作用
display:flex	块级弹性盒子（默认里面元素水平排列）
display:inline-flex	行级弹性盒子
flex-direction:row	元素排列方式 row-reverse column column-reverse
flex-wrap:wrap	换行，装不下的时候换行，没有的话会缩减每个元素的大小
flex-flow:row wrap	将上两个元素一起设置
justify-conten:flex-start	主轴对齐方式 flex-end center space-between (左右靠边，中间平分) space-around(元素左右有完全相同的间距) space-evenly(完全平均分布)
align-items:flex-start	交叉轴对齐方式 center strentch(不设置元素大小会拉伸)
align-self:center	对单个元素进行控制
flex-grow:1	对元素平均分配剩下空间 1表示对于所分配的战友比例
flex-shrink:0	缩小0倍 ， 元素大小=缩小空间-缩小空间/(所有元素和（元素大小倍数）) * 元素倍数元素宽度
flex-basis:100px	主轴基准尺寸，定义在元素上
flex :分配空间 缩小 基准尺寸	以上三个的简写（推荐）
order:3	元素排序
position：absolute	无用
position:relative	有用 因为保留了空间位
·margin-right:auto	设置在元素上面，自动撑满剩下空间

栅格系统

栅格grid	作用
display:grid	放在父元素之中，便是有一个栅格容器
grid-template-rows:repeat(3,[r]1fr)	放在父元素之间，画出行 ，分3份，没份占一份， repeat(auto-fill,100px) 每行宽100px 自动填充 repeat(2,minmax(50px,100px) 设置最大最小格
grid-template-colums:repeat(3,1fr)	放在父元素之间，画出列
row-gap:10px	行间距，列间距相同
gap:10px 20px 10px 30px	间距设置
grid-row-start:1	从第几根横线开始 grid-row-end:结束，纵线也相同
span	偏移量，用在选择格子的时候
grid-row:3 / 4	从3根横线，到第四根横线 列同理 grid-row:1/span 2 使用偏移量
grid-area:2/2/3/3	区域定位
grid-template-areas:命名	需要先画线，在依次命名， 会自动命名线，可以用.占位不命名
grid-auto-flow：row dense	按照行排列，若果有留空，使用合适的元素填充
justyfy-content	对齐方式水平
align-content	对齐方式垂直
place-content:	水平垂直对齐方式，以上两个的简写
justify-items:	设置元素对齐方式 place-items
justify-self:	控制每个元素自己的对齐方式 align-self place-self

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200313172811312.png
变形透视

transfrom	作用
:translateX(10px)	向x轴移动10px 无过渡 % 以当前元素为标准， 以空格分隔同时写多个，一旦错误整条作废（可以用于元素居中）
:translate(x,y)	简写
translate3d(%,%,px)	3d 操作（x,y,z）z不能用% 只能用px
:scaleX(2)	x轴方向放大两倍 scale(x,y) scale3d(x,y,z)
-origin:left top	确定缩放中心
rotateX(45deg)	旋转（相当于一张薄纸在转） rotate3d(x,y,z)
:skewX(45deg)	倾斜45度
:perspective(px)	px表示观察点的距离，离的越远越不明显
perspective(px)	，整体观察是对其子元素产生作用，
transifrom-style:preserve-3d	呈现3d空间
perspective-origin:x,y	人视角运动
backface-visibility:hidden	背面不可见（反转的时候）

不继承

过渡transition	作用
transition:2s	过度时间为2s
transition-property:background	控制那些属性有动画，以,分隔
transition-duration:2s	过度时间
transition-time-function：ease	控制过渡过程之间的弧度
transition-timing-function:steps(2,end)	一步一步的变化 第二个start/end 参数分别表示立即动和等时间完了之后在动
transition-delay:1s	延迟
transition: 动作，方式，时间 延迟时间	简写

帧动画animaton	作用
animation-iteration-count:2	动画执行次数 infinite 一直重复
animation-direction:normal	动画方向 reverse alternate(慢慢 ) alternate-reverse
animation-name:hd	添加动画
animation-duration:2s	动画时间
animation-delay:2s	延迟动画
animation-time-function:ease	ease-in ease-out ease-in-out
animation-play-state:paused	动画状态
animation-fill-mode:backwards	forwards

animation: 名称，模式， 运行时间，延迟时间，

响应式布局
部分响应

响应式	作用
media=“screen,print”	定制相应设备的样式
	link指定样式
@import url(xxx.css) screen	引入
@media screen and	下图
and	多个条件都满足
，	或者，
NOT	逻辑非
only	满足则显示，

有效无效输入验证
input:valid{} input:invalid{}
手型鼠标：cursor:pointer
一般会在html中这只默认样式
html{}
居中
display：flex
position:absolute