Css简介：是对页面的修饰（颜色呀，字体大小呀）也叫层叠样式表。
样式有四种写法：
行内样式：直接写在标签内部
内嵌式：写在标签内，更加公正。
外部文件：<link href=””> （属于提前封装好，外部导入）
类内嵌： @import url(“”)
选择器：****
id 唯一 #
class 多个 .
标签选择器 元素标签
伪类选择器 nth-child（n） 结构伪类选择器 前后伪类 补充
类选择器 使用class或者id定义一个类
子元素选择器 { 父>子 }
通配符选择器 *{样式}
组选择器 h3,div,p,span{样式}
后代选择器: 空格
相邻兄弟选择器: +
属性选择器: 查看
选择器权重值：****
！Important 最高
内联>id>类/伪类>元素>*>继承
颜色：color
分为
rgb（0,0,0） 选色
Hex选色
Hsl 选色
背景颜色：Background-color;
透明度：opacity(0-1)
背景图像：background-image:url(“路径”)
背景拒绝平铺：background-repeat:no-repeat;
背景水平平铺：background-repeat:repeat-x;
背景垂直平铺: background-repeat：repeat-y；
背景定位:background-position：（上下左右）；
背景固定：background-attachment:fixed;
背景滚动：background-attachment:scroll;
简写:查看
边框： Border 查看
虚线:Dashed;
实线:solid;
圆角:radius;
边距：
外边距:margin;
内边距:padding;
框模型： 查看
Border>margin>padding>元素（宽高）
轮廓：outlie 查看****
文本对齐:****
水平居中:texte-align：center;
垂直居中:vertical-align：middle；
清除超链接下划线:****
Texte-decoration：none；
行高:****
Line-height;
文字缩进；查看
Text-indent；
转换大小写；****
Text-tranfrom；
字母间距；****
letter-spcing;
字间距：****
Word-spacing；
阴影：****
Text-shadow；
字体 :查看
元素隐藏:visibility:hidden 占用位置
Display: 查看****
None 元素不显示
Block 转化为块级
Inline 转化为内联
Inline-block行内块
List-item 列表
Run-in 根据上下文作为块级元素或者内联元素显示
定位: Position
Static元素默认的定位方式
Relative 相对
Fixed 相对于视口 绝对
Absolute 祖先 绝对定位
Stick 根据用户的滚动视角位置定位
z-index 展示层
溢出： overflow（仅使用与具有指定高度的块级元素）****
Visible 默认 没有裁剪在元素框外渲染
Hidden 裁剪 其余内容不可见
Scroll 溢出被裁剪 同时添加滚动条查看其余内容
Auto 类似于scroll 必要时添加滚动条比scoll灵活
Overflow-x 处理内容的左右边缘
Overflow-y处理内容的上线边缘
浮动： float
Left 左侧
Right 右侧
None 默认值 不浮动
Inherit 元素继承其父级的float值
清除浮动：clear****
None 允许两侧都有浮动元素 默认值
Left 左侧不允许有浮动
Right 右侧不允许有浮动
Both 左右都不允许
Inherit 元素继承父级的clear值
居中：****
文本水平：text-align:center
元素水平:margin：auto
文本垂直对齐:line-height:height
弹性布局中垂直对齐:justify-content:center;
伪元素：可以修改元素首字母首行的样式 在元素的内容之前后之后插入东西（W3C中双冒号去待遇伪元素单冒号的表示法 这是W3C区别伪类和伪元素的方法） 查看****
::after 在每个
元素之后插入内容
::before 在每个
元素之前插入内容
::first-letter 选择每个
元素的首字母
::first-line 选择每个
元素的首行
::selection 选择用户选择的元素部分
单位:****
Em 元素字体大小
Ex 相当于当前字体大小
Rem 根元素的字体大小
Vw 视口宽度
Vh 视口高度
% 父元素
Rpx 750份
Px 像素
圆角:****
Border-radius(可实现一个三角形)
边框图像:****
Border-image查看
渐变：****
线性渐变（向上/向下/向左/向右/对角线） 查看
Background-iamge:linear-gradient(red,yellow)至少要写两个色标 默认从上往下
Background-iamge:linear-gradient(to right, red,yellow)从左往右
Background-image:linear-gradient(to bottom right ,red ,yellow)
{括号里面也可以填角度 顺时针的 颜色也可以填透明度rgb形式}
径向渐变(由其中心定义)
Background-image：radial-gradient(red,yellow) 查看
阴影： 查看****
文本阴影:text-shadow
元素阴影：box-shadow
2D转换： Tranforms 查看
Skew(斜拉) deg
Scale（缩放）取值0~1
Rotate(旋转)deg
Translate(位移)数值 百分比 负值
Matrix(2d组合)
3D转换: 查看****
RotateX()绕X轴旋转给定角度
rotateY()绕Y轴转
rotateZ()绕Z轴转
ScaleX()缩放
ScaleY()缩放
ScaleZ()缩放
Perspective规定3D元素的透视效果
Perspective-origin规定底部位置
Backface-visibility定义元素不面对屏幕时是否可见
Matrix3D(16个值)
过渡: transition查看****
Delay:过渡延迟
Duration过渡要持续多久
Property过渡效果所针对的css名称
Timing-function过渡效果的速度曲线
Transition()简写 四个属性
动画：@keyframs animation****
@keyframs 规定动画效果
Delay 动画开始的延迟
Direction 规定动画向前向后还是交替
Durtion 规定执行完成需要的时间
Fill-mode 规定元素不播放的样式
Name 规定@keyframs动画的名称
Play-state 运行还是暂停
Timing-function 速度曲线
Animation 简写所有属性
**Obiect-fit （用来调整img或者video适应容器）****
**fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）
C ursor （鼠标悬停样式） 查看****
C olumn 多列布局 查看****
O utline-offset 在元素边框外部添加空隙****
R size 规定元素是否可以被用户缩放****
V ar() 插入css变量的值****
box-sizing 重新定义高度和宽度的计算方尺包含内外边距****
弹性布局：****
| 属性**** | 描述**** |
|---|---|
| display | 规定用于 HTML 元素的盒类型。 |
| flex-direction | 规定弹性容器内的弹性项目的方向。 |
| justify-content | 当弹性项目没有用到主轴上的所有可用空间时，水平对齐这些项目。 |
| align-items | 当弹性项目没有用到主轴上的所有可用空间时，垂直对齐这些项。 |
| flex-wrap | 规定弹性项目是否应该换行，若一条 flex 线上没有足够的空间容纳它们。 |
| align-content | 修改 flex-wrap 属性的行为。与 align-items 相似，但它不对齐弹性项目，而是对齐 flex 线。 |
| flex-flow | flex-direction 和 flex-wrap 的简写属性。 |
| order | 规定弹性项目相对于同一容器内其余弹性项目的顺序。 |
| align-self | 用于弹性项目。覆盖容器的 align-items 属性。 |
| flex | flex-grow、flex-shrink 以及 flex-basis 属性的简写属性。 |
@media 媒体查询****
G rid布局****
